chore: dashboard nav loading anim

src/_components/nav.vto

···
 <div class="nav-container">
   <nav id="diffuse-nav">
     <a href="dashboard/" class="button {{ colorClass("dashboard/") }} button--border">
-      <span class="with-icon">
+      <span>
         <i class="ph-fill ph-person"></i>
         Your Diffuse
       </span>
     </a>
 
     <a href="guide/" class="button {{ colorClass("guide/") }} button--border">
-      <span class="with-icon">
+      <span>
         <i class="ph-fill ph-book-open-text"></i>
         Guide
       </span>
     </a>
 
     <a href="featured/" class="button {{ colorClass("featured/") }} button--border">
-      <span class="with-icon">
+      <span>
         <i class="ph-fill ph-sparkle"></i>
         Featured
       </span>
     </a>
 
     <a href="build/" class="button {{ colorClass("build/") }} button--border">
-      <span class="with-icon">
+      <span>
         <i class="ph-fill ph-hammer"></i>
         Build
       </span>
···
     <div class="divider"></div>
 
     <a href="data/" class="button {{ colorClass("data/") }} button--border">
-      Input & Output
+      <span>Input & Output</span>
     </a>
 
     <a href="playback/" class="button {{ colorClass("playback/") }} button--border">
-      Playback
+      <span>Playback</span>
     </a>
 
     <a href="browsing/" class="button {{ colorClass("browsing/") }} button--border">
-      Browsing
+      <span>Browsing</span>
     </a>
 
     <a href="themes/" class="button {{ colorClass("themes/") }} button--border">
-      Themes
+      <span>Themes</span>
     </a>
 
     <a href="misc/" class="button {{ colorClass("misc/") }} button--border">
-      <span class="with-icon">
+      <span>
         <i class="ph-fill ph-treasure-chest"></i>
       </span>
     </a>

src/common/pages/ppr.js

···
   event.intercept({
     scroll: "manual",
     async handler() {
+      const navLinks = /** @type {HTMLAnchorElement[]} */ ([
+        ...document.querySelectorAll("#diffuse-nav a, #nav-overflow-menu a"),
+      ]);
+      const stripSlash = (/** @type {string} */ p) => p.replace(/^\//, "");
+      const navLink = navLinks.find(
+        (a) =>
+          stripSlash(new URL(a.href).pathname) === stripSlash(url.pathname),
+      );
+
+      const icon = navLink?.querySelector("i");
+      const originalIconClass = icon?.className;
+      let addedSpinner = /** @type {HTMLElement | undefined} */ (undefined);
+
+      const loadingTimer = navLink
+        ? setTimeout(() => {
+            if (icon) {
+              icon.className = "ph-bold ph-spinner animate-spin";
+            } else {
+              addedSpinner = document.createElement("i");
+              addedSpinner.className = "ph-bold ph-spinner animate-spin";
+              const span = navLink.querySelector("span");
+              (span ?? navLink).prepend(addedSpinner);
+            }
+          }, 250)
+        : undefined;
+
       let html;
 
       try {
···
         if (!response.ok) throw new Error(`${response.status}`);
         html = await response.text();
       } catch {
+        clearTimeout(loadingTimer);
+        if (icon && originalIconClass !== undefined) icon.className = originalIconClass;
+        addedSpinner?.remove();
         location.href = url.href;
         return;
+      } finally {
+        clearTimeout(loadingTimer);
+        if (icon && originalIconClass !== undefined) icon.className = originalIconClass;
+        addedSpinner?.remove();
       }
 
       const parser = new DOMParser();