vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dashboard: fix rebuild spinner shape (#804)

Browse source 
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.
This commit is contained in:
iris 2026-05-31 15:25:08 +02:00 • committed by mara
commit dc8c71c687
1 changed files with 13 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

21
frontend/packages/dashboard/src/dashboard.css
View file

@ -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;
}