3b61ac3d23
Many loading states rendered bare "Loading…" text with no spinner element, and a couple rendered an unstyled `loading-spinner` div with no matching CSS (invisible). The global spin animation was never broken — it rotates in Chromium and WebKit — so prior transform-box edits chased a non-bug, validated only by a string-matching CSS test. Add a shared <LoadingSpinner> (self-contained animated SVG, no lucide-react import so it survives partial test mocks) and adopt it across ~47 loading placeholders so every loading state shows a consistent animated spinner. Includes a component test that asserts the svg carries the animate-spin utility. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
12 lines
250 B
CSS
12 lines
250 B
CSS
.loading-spinner {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Keep the label on the spinner's baseline regardless of the host container. */
|
|
.loading-spinner__label {
|
|
line-height: 1.2;
|
|
}
|