From dc8c71c687136413edac03bd97b02978be95928c Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive>
Date: Sun, 31 May 2026 15:25:08 +0200
Subject: [PATCH] dashboard: fix rebuild spinner shape (#804)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mara reported the rebuild spinner rendered as a rotating L-corner
('_|' / '⌐') instead of a smooth orbiting arc. Two issues:

1. The previous version coloured TWO adjacent border sides amber
   (border-top + border-right). With the rest of the border
   transparent, this paints a sharp L-shape at the icon corner —
   which when rotated reads as a spinning border-corner, not a
   loading spinner.

2. @keyframes had only `to` defined. Safer to include explicit
   `from { transform: rotate(0deg) }` so any browser that doesn't
   default cleanly still picks up the rotation.

Fix is the classic CSS spinner shape: faint amber ring around the
full icon perimeter (`border: 2px solid rgba(250, 179, 135, 0.2)`)
with one brighter top arc (`border-top-color: var(--amber)`) that
rotates. Reads unambiguously as a loading indicator.

Closes #804.
---
 frontend/packages/dashboard/src/dashboard.css | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css
index 343f338f..2e806146 100644
--- a/frontend/packages/dashboard/src/dashboard.css
+++ b/frontend/packages/dashboard/src/dashboard.css
@@ -335,13 +335,19 @@ a:hover {
   border-color: var(--amber);
   background: rgba(250, 179, 135, 0.05);
 }
-/* The spinner is a transparent border ring with two adjacent sides
-   coloured amber, rotated by a CSS animation — looks like an
-   orbiting arc around the icon. 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). */
+/* 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.
+
+   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 {
-  to { transform: rotate(360deg); }
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
 }
 .container-row.pending-running > .container-icon {
   overflow: visible;
@@ -351,9 +357,8 @@ a:hover {
   position: absolute;
   inset: -4px;
   border-radius: 10px;
-  border: 2px solid transparent;
+  border: 2px solid rgba(250, 179, 135, 0.2);
   border-top-color: var(--amber);
-  border-right-color: var(--amber);
   animation: container-icon-spin 1s linear infinite;
   pointer-events: none;
 }