add loading overlay to button when sending signup

src/app/website/signup/Signup.astro

@@ -124,7 +124,7 @@ const { signupDisabled, signupHash } = Astro.props;
             </span>
           </Checkbox>
         </div>
-        <button class="btn btn-neutral">Anmeldung absenden</button>
+        <button id="send-btn" class="btn btn-neutral">Anmeldung absenden</button>
       </form>
     </div>
   </div>
@@ -181,6 +181,7 @@ const { signupDisabled, signupHash } = Astro.props;
 
   function setupForm() {
     const form = document.getElementById('signup')! as HTMLFormElement;
+    const sendBtn = document.getElementById('send-btn')! as HTMLButtonElement;
 
     // reset form on site (re-)load
     form.reset();
@@ -229,9 +230,11 @@ const { signupDisabled, signupHash } = Astro.props;
       });
     };
 
-    form.addEventListener('submit', (e) => {
+    form.addEventListener('submit', async (e) => {
       e.preventDefault();
-      sendSignup();
+      sendBtn.classList.add('loading-overlay');
+      await sendSignup();
+      sendBtn.classList.remove('loading-overlay');
     });
   }
 

src/styles/websiteLayout.css

@@ -39,3 +39,37 @@ h5,
 h6 {
   @apply font-minecraft;
 }
+
+@layer utilities {
+  .btn.loading-overlay {
+    @apply btn-disabled relative;
+
+    &::before,
+    &::after {
+      content: '';
+      box-sizing: border-box;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      border: 2px solid #fff;
+      position: absolute;
+      animation: animloader 2s linear infinite;
+    }
+
+    &::after {
+      opacity: 0;
+      animation-delay: 1s;
+    }
+  }
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}