From 6d7ec9084349e201e62499ba2e918ff0a8d22fd7 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive>
Date: Sun, 31 May 2026 17:56:30 +0200
Subject: [PATCH] =?UTF-8?q?dashboard:=20revise=20rebuild=20spinner=20?=
 =?UTF-8?q?=E2=80=94=20transparent=20ring,=20single=20rotating=20arc=20(#8?=
 =?UTF-8?q?04=20follow-up)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR #807 fix (faint amber full ring + brighter top arc) still reads
as 'a border around the icon, with a brighter top' rather than as
a loading spinner — mara reports it's still broken.

This iteration drops the full ring entirely. The ::after now has
transparent borders on three sides plus a bright amber top arc, so
only the rotating arc itself is visible — no static ring frame
around the icon. Same shape every desktop OS uses for circular
progress indicators (Material, Apple's spinner, etc.).

Other tweaks:
- 3px stroke (was 2px) so the arc carries enough visual weight
- inset: -5px + border-radius: 11px to keep the arc hugging the
  icon's 6px-radius square at the new stroke width
- 0.9s rotation period (was 1s) — slightly snappier read

Same DOM, same .pending-running class trigger; pure CSS swap.
---
 frontend/packages/dashboard/src/dashboard.css | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css
index 2c7872b4..2bf741e9 100644
--- a/frontend/packages/dashboard/src/dashboard.css
+++ b/frontend/packages/dashboard/src/dashboard.css
@@ -326,15 +326,17 @@ a:hover {
   border-color: var(--amber);
   background: rgba(250, 179, 135, 0.05);
 }
-/* The spinner is a faint amber ring with one brighter arc on top
-   that rotates around the icon — classic CSS spinner shape. The
-   previous version coloured two adjacent border sides amber, which
-   rendered as a rotating L-corner ("_|") rather than a smooth
-   orbiting arc (mara on #804). Faint-ring + bright-arc reads
-   unambiguously as a loading spinner.
+/* The spinner is a single rotating arc — a transparent ring with
+   only the top side coloured amber. As it rotates, the visible arc
+   sweeps around the icon like a classic loading indicator. Earlier
+   shapes (two-adjacent-sides → L-corner; faint-ring + bright-arc →
+   reads as a static border) didn't read unambiguously as a spinner
+   — this one has no full ring, only the moving arc.
 
-   Override the icon's overflow:hidden so the ring can sit just
-   outside the square; it composes naturally with the mauve
+   The 3px stroke + thicker rounded radius gives the arc enough
+   visual weight that it doesn't disappear at typical viewport
+   sizes. Override the icon's overflow:hidden so the ring can sit
+   just outside the square; it composes naturally with the mauve
    selected-ring (selected + running shows both). */
 @keyframes container-icon-spin {
   from { transform: rotate(0deg); }
@@ -346,11 +348,11 @@ a:hover {
 .container-row.pending-running > .container-icon::after {
   content: '';
   position: absolute;
-  inset: -4px;
-  border-radius: 10px;
-  border: 2px solid rgba(250, 179, 135, 0.2);
+  inset: -5px;
+  border-radius: 11px;
+  border: 3px solid transparent;
   border-top-color: var(--amber);
-  animation: container-icon-spin 1s linear infinite;
+  animation: container-icon-spin 0.9s linear infinite;
   pointer-events: none;
 }
 .container-row .head {