fix: Loading animation issues

html/index.php

@@ -10,12 +10,14 @@ function renderChoice(): void {
 
     $csrfToken = $_SESSION["csrfToken"];
 
-    if (isset($_GET["ajax"])) {
+    $ajax = isset($_GET["ajax"]);
+
+    if ($ajax) {
         include __DIR__ . "/../view/fragments/mobSelection.php";
     } else {
         $title = "Test";
         $content = function() use ($left, $right, $csrfToken) {
-            include __DIR__ . "/../view/fragments/mobSelection.php";
+            include __DIR__ . "/../view/pages/mobSelection.php";
         };
 
         include __DIR__ . "/../view/layout.php";

html/styles/main.css

@@ -15,6 +15,10 @@ h1 {
     text-align: center;
 }
 
+.choice {
+    position: relative;
+}
+
 .selection {
     display: flex;
     flex-direction: row;
@@ -26,11 +30,20 @@ h1 {
 
 .separator {
     flex-grow: 1;
-    font-size: 5vw;
     position: relative;
 }
 
-.separator .or, .separator .spinner {
+.middle {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    user-select: none;
+    z-index: -100;
+}
+
+.middle .or, .middle .spinner {
+    font-size: 5vw;
     position: absolute;
     top: 50%;
     width: 100%;
@@ -40,7 +53,7 @@ h1 {
     transition: opacity 0.5s;
 }
 
-.separator .spinner {
+.middle .spinner {
     opacity: 0;
 }
 
@@ -51,7 +64,7 @@ h1 {
     opacity: 0;
 }
 
-.separator .spinner img {
+.middle .spinner img {
     animation-name: spinner;
     animation-duration: 1s;
     animation-iteration-count: infinite;

resources/js/img-preload.ext.js

@@ -4,18 +4,18 @@ console.log("module loaded");
 
 htmx.defineExtension('img-preload', {
     onEvent: (name, event) => {
-        if (event.target.getAttribute("hx-ext") !== "img-preload") {
+        if ((event?.target?.getAttribute("hx-ext") ?? "") !== "img-preload") {
             return;
         }
 
-        const spinner = [...document.querySelectorAll(
+        const getSpinners = () => [...document.querySelectorAll(
             event.target.getAttribute("data-preload-spinner")
             ?? ".img-preload"
         )];
 
         switch (name) {
             case 'htmx:trigger':
-                spinner.forEach(s => s.classList.add("img-preload"));
+                getSpinners().forEach(s => s.classList.add("img-preload"));
                 break;
             case 'htmx:beforeOnLoad':
                 event.detail.shouldSwap = false;
@@ -33,11 +33,11 @@ htmx.defineExtension('img-preload', {
 
                 Promise.all(imagePromises)
                     .then(() => {
-                        spinner.forEach(s => s.classList.remove("img-preload"));
                         htmx.swap(event.detail.target, event.detail.xhr.response, {
                             swapStyle: "outerHTML",
                             transition: true,
                         });
+                        getSpinners().forEach(s => s.classList.remove("img-preload"))
                     })
                     .catch(error => {
                         console.error('Error loading images:', error);

view/fragments/mob.php

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

view/fragments/mobSelection.php

@@ -1,25 +1,16 @@
-<div class="choice">
-    <h1>
-        Which do you like better?
-    </h1>
-    <div class="selection">
-        <?php
-            $mob = $left ?? [];
-            $side = "left";
-            include __DIR__ . "/mob.php";
-        ?>
-        <div class="separator">
-            <div class="or">
-                OR
-            </div>
-            <div class="spinner">
-                <img src="/images/gras.png" alt="spinner" />
-            </div>
-        </div>
-        <?php
-            $mob = $right ?? [];
-            $side = "right";
-            include __DIR__ . "/mob.php";
-        ?>
+<div class="selection">
+<?php
+    $mob = $left ?? [];
+    $side = "left";
+    include __DIR__ . "/mob.php";
+
+?>
+    <div class="separator">
     </div>
+<?php
+
+    $mob = $right ?? [];
+    $side = "right";
+    include __DIR__ . "/mob.php";
+?>
 </div>

view/pages/mobSelection.php

@@ -0,0 +1,18 @@
+<div class="choice">
+    <h1>
+        Which do you like better?
+    </h1>
+    <?php
+        $separator = !($ajax ?? false);
+
+        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>
+</div>