From 22a778d683836f75b4c5c3b6c25c805f3fdcb4fa Mon Sep 17 00:00:00 2001
From: Tixie <tixie@guerilla.studio>
Date: Thu, 2 Mar 2023 10:40:04 +0100
Subject: [PATCH] Loading state

---
 src/css/2-components/_buttons.scss       | 45 ++++++++++++++++++++++++
 src/css/2-components/_notifications.scss |  3 +-
 src/index.njk                            |  2 +-
 src/js/script.js                         |  3 +-
 4 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/css/2-components/_buttons.scss b/src/css/2-components/_buttons.scss
index 2c9b204..2722c49 100755
--- a/src/css/2-components/_buttons.scss
+++ b/src/css/2-components/_buttons.scss
@@ -177,3 +177,48 @@ $btn-border-width: 0.1rem;
   font-size: clamp(2.5rem, 3.8vw, 3.8rem);
   line-height: 1.15em;
 }
+
+// State
+// --------------------------------------------------------------
+
+.btn--loading,
+.btn--loading:link,
+.btn--loading:visited {
+  position: relative;
+  z-index: 0;
+  overflow: hidden;
+  cursor: progress;
+}
+
+@keyframes btn-loading-rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+
+.btn--loading::before {
+  position: absolute;
+  z-index: -2;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  animation: btn-loading-rotate 1s linear infinite;
+  background-color: #1a232a;
+  background-image: conic-gradient(transparent, $color-pink-1, transparent 30%);
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  content: "";
+}
+
+.btn--loading::after {
+  position: absolute;
+  z-index: -1;
+  top: 0.6rem;
+  left: 0.6rem;
+  width: calc(100% - 1.2rem);
+  height: calc(100% - 1.2rem);
+  background: $color-purple-1;
+  border-radius: 0.5rem;
+  content: "";
+}
diff --git a/src/css/2-components/_notifications.scss b/src/css/2-components/_notifications.scss
index a25946d..19f4384 100755
--- a/src/css/2-components/_notifications.scss
+++ b/src/css/2-components/_notifications.scss
@@ -72,7 +72,8 @@ $notif-error: $color-red;
 
 .notif--successPlusOne {
   position: relative;
-  animation: success-shake 1s linear both;
+  animation: success-shake 0.75s linear both;
+  animation-delay: 1s;
   transform: scale(1.1);
 }
 
diff --git a/src/index.njk b/src/index.njk
index b367c50..aad332a 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -23,7 +23,7 @@ permalink:
 		<article class="w100 maxw380px text-center">
 			<h2 class="title-1 mt0">Et <span class="highlighter-underline">vous</span>&nbsp;?</h2>
 			<div class="flex flex-col">
-				<div class="notif notif--error mb2" x-bind="error" x-cloak>Message d'erreur à faire</div>
+				{# <div class="notif notif--error mb2" x-bind="error" x-cloak>Message d'erreur à faire</div> #}
 				<div class="gridstack mb15">
 					<form action="/" method="post" class="flex" x-bind="form">
 						<button class="btn btn--big btn--icoYellow w100" x-bind="button">
diff --git a/src/js/script.js b/src/js/script.js
index 88ae287..dfdec28 100644
--- a/src/js/script.js
+++ b/src/js/script.js
@@ -28,7 +28,8 @@ document.addEventListener('alpine:init', () => {
 		},
 
 		button: {
-			["x-bind:disabled"]: "loading"
+			["x-bind:disabled"]: "loading",
+			["x-bind:class"]: "{ 'btn--loading' : loading }"
 		},
 
 		thanks: {