Fix spinner: CSS rotate on compositor thread, not setInterval

index.html

@@ -317,7 +317,7 @@
     .doc-card.ranked-3 .doc-score-num { color: #60A5FA; }
     .doc-card.ranked-3 .doc-score-bar { background: #60A5FA; }
 
-    /* Active card being scored — amber left-border pulse + dim overlay */
+    /* Active card being scored — amber left-border + glow pulse */
     .doc-card.computing {
       border-color: var(--amber-dim);
       box-shadow: inset 3px 0 0 var(--amber), 0 0 12px rgba(245,158,11,0.08);
@@ -329,21 +329,20 @@
       50%       { box-shadow: inset 3px 0 0 var(--amber), 0 0 18px rgba(245,158,11,0.18); }
     }
 
+    /* CSS-only spinner — works even when WASM blocks the JS event loop */
     .doc-card.computing .doc-score-num {
+      display: inline-block;          /* required for transform */
       color: var(--amber);
-      font-size: 0.72rem;
-      letter-spacing: 0.05em;
-      animation: score-spin-text 1s linear infinite;
+      font-size: 1.2rem;
+      animation: spin 0.7s linear infinite;
+      transform-origin: center;
     }
 
-    @keyframes score-spin-text {
-      0%   { content: '⠋'; }
-      /* CSS content animation doesn't work on non-pseudo-elements — use JS instead */
-      0%, 100% { opacity: 1; }
-      50%       { opacity: 0.35; }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
     }
 
-    /* Spinner ring in score bar while computing */
+    /* Indeterminate progress bar (also CSS-only) */
     .doc-card.computing .doc-score-bar {
       background: var(--amber);
       width: 100% !important;
@@ -352,9 +351,9 @@
     }
 
     @keyframes bar-indeterminate {
-      0%   { transform: scaleX(0);   opacity: 0.6; }
-      50%  { transform: scaleX(1);   opacity: 1; }
-      100% { transform: scaleX(0);   opacity: 0.6; }
+      0%   { transform: scaleX(0); opacity: 0.6; }
+      50%  { transform: scaleX(1); opacity: 1; }
+      100% { transform: scaleX(0); opacity: 0.6; }
     }
 
     /* ── Unscored doc (has text but wasn't in last rank run) ── */
@@ -761,17 +760,11 @@
       rankBtn.classList.add("running");
       rankBtn.textContent = "⟳ Ranking…";
 
-      const SPINNER = ["⠋","⠙","⠹","⠸","⠼","⠴","⠦","⠧","⠇","⠏"];
-      const spinners = new Map(); // card → intervalId
-
+      // Set ⟳ once — CSS rotates it on the compositor thread,
+      // so it spins even while WASM inference blocks the JS event loop.
       toScore.forEach(({ card }) => {
         card.classList.add("computing");
-        const numEl = card.querySelector(".doc-score-num");
-        numEl.textContent = SPINNER[0];
-        let i = 0;
-        spinners.set(card, setInterval(() => {
-          numEl.textContent = SPINNER[++i % SPINNER.length];
-        }, 80));
+        card.querySelector(".doc-score-num").textContent = "⟳";
       });
 
       const scored = [];
@@ -797,7 +790,6 @@
           const en = Math.exp(ln - m);
           const score = ey / (ey + en);
 
-          clearInterval(spinners.get(card));
           card.classList.remove("computing");
           animateScore(
             card.querySelector(".doc-score-num"),
@@ -808,7 +800,6 @@
 
         } catch (err) {
           console.error("Inference error on doc", id, err);
-          clearInterval(spinners.get(card));
           card.classList.remove("computing");
           card.querySelector(".doc-score-num").textContent = "err";
           setStatus("error", `Error: ${err?.message ?? String(err)}`);