feat: Change loading animation

html/styles/main.css

@@ -50,24 +50,18 @@ h1 {
     text-align: center;
     transform: translate(0%, -50%);
     opacity: 1;
-    transition: opacity 0.5s;
+    transition: opacity 0.2s;
 }
 
-.middle .spinner {
+.loading .or {
     opacity: 0;
 }
 
-.img-preload .spinner {
-    opacity: 1;
-}
-.img-preload .or {
-    opacity: 0;
-}
-
-.middle .spinner img {
+.loading .spinner img {
     animation-name: spinner;
     animation-duration: 1s;
-    animation-iteration-count: infinite;
+    animation-delay: 0.2s;
+    animation-iteration-count: 1;
     animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
 }
 
@@ -80,7 +74,6 @@ h1 {
     }
 }
 
-
 .mob {
     width: 40vw;
     height: 42vw;

resources/js/img-preload.ext.js

@@ -13,14 +13,9 @@ htmx.defineExtension('img-preload', {
             return;
         }
 
-        const getSpinners = () => [...document.querySelectorAll(
-            event.target.getAttribute("data-preload-spinner")
-            ?? ".img-preload"
-        )];
-
         switch (name) {
             case 'htmx:trigger':
-                getSpinners().forEach(s => s.classList.add("img-preload"));
+                [eval][0](event.target.getAttribute("data-loading-callback"));
                 break;
             case 'htmx:beforeOnLoad':
                 event.detail.shouldSwap = false;
@@ -42,7 +37,7 @@ htmx.defineExtension('img-preload', {
                             swapStyle: "outerHTML",
                             transition: true,
                         });
-                        getSpinners().forEach(s => s.classList.remove("img-preload"))
+                        [eval][0](event.target.getAttribute("data-loaded-callback"));
                     })
                     .catch(error => {
                         console.error('Error loading images:', error);

resources/js/index.js

@@ -1,2 +1,4 @@
 import './htmx';
 import './img-preload.ext';
+
+import './spinner';

resources/js/spinner.js

@@ -0,0 +1,33 @@
+var spinnerActive = false;
+
+const triggerAnimation = () => {
+    setTimeout(() => {
+        document.getElementsByClassName("middle")[0].classList.add("loading");
+    }, 1);
+}
+
+const endAnimation = () => {
+    document.getElementsByClassName("middle")[0].classList.remove("loading");
+}
+
+window.startSpinner = () => {
+    if (spinnerActive) {
+        return
+    }
+    spinnerActive = true;
+    document.getElementsByClassName("middle")[0].classList.add("loading");
+}
+
+window.stopSpinner = () => {
+    spinnerActive = false;
+}
+
+window.addEventListener("load", () => {
+    document.querySelector(".middle .spinner img")
+        .addEventListener("animationend", () => {
+            endAnimation();
+            if (spinnerActive) {
+                triggerAnimation();
+            }
+        });
+});

view/fragments/mob.php

@@ -6,7 +6,7 @@
 <div class="mob" onclick="htmx.trigger(document.forms['<?= $side ?>'], 'submit', {})" id="form-<?= $side ?>">
     <form action="?<?= $side ?>" method="POST" name="<?= $side ?>"
           data-hx-post="?<?= $side ?>&ajax" data-hx-target=".selection" data-hx-swap="outerHTML"
-          data-hx-ext="img-preload" data-preload-spinner=".middle">
+          data-hx-ext="img-preload" data-loading-callback="startSpinner()" data-loaded-callback="stopSpinner()">
         <input type="hidden" name="csrfToken" value="<?= $csrfToken ?>">
         <h2><?= $mob["name"]; ?></h2>
         <img alt="<?= $mob["name"]; ?>" src="/images/mobs/<?= $mob["image"] ?? "_placeholder.png"; ?>">

view/pages/mobSelection.php

@@ -8,11 +8,11 @@
         require_once __DIR__ . "/../fragments/mobSelection.php";
     ?>
     <div class="middle">
-        <div class="or">
-            OR
-        </div>
         <div class="spinner">
             <img src="/images/gras.png" alt="spinner" />
         </div>
+        <div class="or">
+            OR
+        </div>
     </div>
 </div>