changes

app/spa-loading-template.html

@@ -0,0 +1,68 @@
+<div id="loading-overlay">
+  <div id="loading-content">
+    <img
+      src="/favicon.svg"
+      width="80"
+      class="pulse"
+    />
+    <p id="elapsed"></p>
+  </div>
+</div>
+
+<style>
+  * {
+    scrollbar-width: none;
+  }
+  ::-webkit-scrollbar {
+    width: 0px;
+  }
+  #loading-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+  }
+  #loading-content {
+    position: absolute;
+    display: flex;
+    gap: 1.5rem;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    top: 40%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .pulse {
+    animation: pulse 2s infinite;
+  }
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.6;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+</style>
+
+<script>
+  function displayElapsed() {
+    const start = Date.now();
+    let elapsed = 0;
+    const elapsedInterval = setInterval(() => {
+      elapsed = Date.now() - start;
+      const elapsedDiv = document.getElementById("elapsed");
+      if (!elapsedDiv) {
+        clearInterval(elapsedInterval);
+        return;
+      }
+      elapsedDiv.textContent = (elapsed / 1000).toFixed(1);
+    }, 200);
+  }
+
+  // displayElapsed(); // debug
+</script>