fix(dashboard): one stated rule for small-size spinners

[adiarora06]

Problem / Motivation

Small loading indicators use Loader2/LoaderCircle inconsistently, and the arc glyph becomes difficult to read at 10–14px. The repository had no stated rule or regression guard.

Why it matters

These indicators appear throughout dense dashboard controls. Inconsistent glyph selection makes equivalent states look different, while undersized arc spinners read as broken rings instead of motion.

What changed (motivation → approach → change)

Adopt one size-based rule: below 15px use lucide Loader; at 15px and above use LoaderCircle. The change documents that rule, applies it across explicit-size call sites, covers spinner components stored in icon maps, and adds a source-level guard. CSS/1em-sized spinners remain outside the static rule because their rendered size is contextual.

Tests

• spinnerGlyphRule.test.ts: four assertions cover sub-15px sites, 15px-and-up sites, icon maps, and the documentation pin.
• Updated glyph-class assertions in affected component tests.
• Full frontend run previously completed with 20,959 tests passing; one known unrelated parallel-load flake passed in isolation.
• TypeScript typecheck passed; ESLint reported zero errors.

Manual verification

Reviewed the affected spinner sizes and confirmed the rule preserves LoaderCircle at normal sizes while using the spoke glyph only where the arc loses legibility.

Screenshots / video

N/A — this is a repository-wide consistency sweep of existing loading states; no layout or interaction changed.

Related Issues

Closes #3925

Checklist

• At most two commits (one is the norm), with a Conventional Commits title (feat|fix|docs|refactor|perf|test|chore|ci|build|revert: ...)
• Existing tests pass and new tests added for new functionality
• Self-review completed; code follows project style guidelines
• Documentation updated
• No secrets, credentials, or internal references in the diff

Contribution License Agreement

N/A — repository placeholder; no CLA text has been supplied.

[iamwhatever]

👋 Hi! This PR's description is missing some required sections from our PR template. Workflow runs won't be auto-approved until the description is updated.

Missing sections:

• ## Problem / Motivation
• ## Why it matters
• ## What changed
• ## Tests

Please update your PR description to include these sections, then push or re-save the description. The workflows will be approved on the next cycle.

[github-actions]

UX Review (Fable 5, fork) — ✅ PASS

UX-level review of fa79d54d7a469f07ce641bcb8aa5840c269939ce via the fork AI-review pipeline — updated in place on each push. A BLOCK verdict blocks PR readiness; PASS/CONCERNS are advisory.

UX-Verdict: PASS

A pure spinner-glyph consistency sweep — size-keyed, documented, and test-enforced; no copy, flow, or state a user interacts with changes.

[UX-REVIEWED] fa79d54

[github-actions]

GPT 5.6 Review (fork) — ✅ no blocking findings

Reviewed fa79d54d7a469f07ce641bcb8aa5840c269939ce via the fork AI-review pipeline; updated in place on each push.

Review details

FINDING -- website/src/test/spinnerGlyphRule.test.ts:13 -- SMALL_ARC ignores size after other props, letting existing sub-15px arc spinners bypass the promised guard -> Fix: match numeric size anywhere in the opening tag.
[GPT-REVIEWED] fa79d54

[github-actions]

First Principles Review (Fable 5, fork) — 🟡 CONCERNS

Premise-level review of fa79d54d7a469f07ce641bcb8aa5840c269939ce via the fork AI-review pipeline — why this exists and whether the shipped surface is the smallest honest version. Updated in place on each push. A BLOCK verdict blocks PR readiness; PASS/CONCERNS are advisory.

I have everything the contract requires: intent, full inventory, counted siblings/consumers against the base tree, and verified the guard-test convention already exists in-repo. Emitting the review.

First-Principles-Verdict: CONCERNS

The rule and sweep earn their place, but eight lucide-inline sites are flipped by a size attr their own CSS overrides — the doc's own scope sentence says to leave those alone.

What this change ships

Intent: make small loading spinners legible and uniform by adopting one size-keyed glyph rule — a FIX (closes #3925).

1. Sub-15px spinners across the dashboard and apps spin as eight spokes instead of an arc (~45 sites) — justified
2. Three 16–20px chat spinners flip the other way, spoke → arc — justified (the consistency half, declared via the 15px-and-up test)
3. Five status/phase icon maps now name the spoke glyph — justified, declared
4. page-layout.md gains a Spinners section stating the rule — justified (spec-updated-in-same-commit invariant)
5. New source-scan test enforces the rule both ways, in maps, and pins the doc — justified (matches the existing convention: issueRadarStickyHeader.test.tsx already scans source)
6. Eight CSS-sized (lucide-inline) spinners flipped by declared size — undeclared, contradicts the doc's own scope
7. Two AssistantMessage tests rewritten wholesale where only two class names changed — rides along
8. Eleven import blocks collapsed from multi-line to one line — rides along

Watch

• The doc says a CSS-sized spinner "has no size to check statically and is out of the rule's scope; leave those on LoaderCircle." Yet 8 swept sites (grep lucide-inline.*animate-spin with size=: CommandBarOverlay, ErrorCard, ReportProblemModal, BrowserPanel ×2, DevFleetPage ×3) carry .lucide-inline { width: 1em } (index.css:2068), which overrides the size attribute — so the sweep and the guard test classify these by a number that does not control rendering. Either delete the inert size attr at those sites or leave them on LoaderCircle per the doc.

Subtractions

• Revert the two rewritten tests in website/src/test/AssistantMessage.test.tsx to the minimal lucide-loader-circle → lucide-loader class swap; the restructure (renames, moved clicks, new comments) is churn the fix doesn't need.
• Revert the 11 multi-line import blocks collapsed to single lines (e.g. AddReposModal.tsx, BrowserPanel.tsx, mochi ChatPanel.tsx) — formatting churn that buries the real change in blame.
• Drop the inert size={N} attribute from the 8 lucide-inline spinner sites above, so the guard test's classification matches what actually renders.

[FIRST-PRINCIPLES-REVIEWED] fa79d54

[github-actions]

Design Review (Fable 5, fork) — ✅ PASS

Design-level review of fa79d54d7a469f07ce641bcb8aa5840c269939ce via the fork AI-review pipeline — updated in place on each push. A BLOCK verdict blocks PR readiness; PASS/CONCERNS are advisory.

Design-Verdict: PASS

A real, issue-backed inconsistency, fixed with a stated rule plus a two-directional guard — consistent with this repo's existing source-pin test idiom.

Watch

• The rule keys on the declared size, but several converted sites (e.g. CommandBarOverlay.tsx, DevFleetPage.tsx) also carry lucide-inline, whose width: 1em overrides that attribute — the doc declares CSS-sized spinners out of scope, yet the guard classifies these by a number that doesn't govern their rendering. Harmless today (1em ≈ the declared px at those sites), but it blurs the rule's own scoping; consider stripping the vestigial size or noting the interaction in the doc.

Suggestions

• A shared <Spinner size={n}> that picks the glyph internally would encode the rule once, absorb future call sites without discipline, and shrink the regex guard to "no raw Loader/LoaderCircle outside Spinner" — a follow-up worth considering since this PR already touched every site.
• The guard test has no exemption mechanism; if a legitimate divergence ever appears (design refresh, one-off context), the only outs are compliance or editing the test — a short "how to exempt" line in the doc would pre-empt that fight.

[DESIGN-REVIEWED] fa79d54

[github-actions]

Opus 4.8 Review (fork) — ✅ no blocking findings

Reviewed fa79d54d7a469f07ce641bcb8aa5840c269939ce via the fork AI-review pipeline; updated in place on each push.

Review details

No findings.

[OPUS-REVIEWED] fa79d54

[iamwhatever]

👋 Hi! This PR's description is missing some required sections from our PR template. Workflow runs won't be auto-approved until the description is updated.

Missing sections:

• ## Problem / Motivation
• ## Why it matters
• ## What changed
• ## Tests

Please update your PR description to include these sections, then push or re-save the description. The workflows will be approved on the next cycle.

[bolichen97]

👋 Hi! This PR's description is missing some required sections from our PR template. Workflow runs won't be auto-approved until the description is updated.

Missing sections:

• ## Problem / Motivation
• ## Why it matters
• ## What changed
• ## Tests

Please update your PR description to include these sections, then push or re-save the description. The workflows will be approved on the next cycle.

[iamwhatever]

👋 Hi! This PR's description is missing some required sections from our PR template. Workflow runs won't be auto-approved until the description is updated.

Missing sections:

• ## Problem / Motivation
• ## Why it matters
• ## What changed
• ## Tests

Please update your PR description to include these sections, then push or re-save the description. The workflows will be approved on the next cycle.

[iamwhatever]

👋 Hi! This PR's description is missing some required sections from our PR template. Workflow runs won't be auto-approved until the description is updated.

Missing sections:

• ## Problem / Motivation
• ## Why it matters
• ## What changed
• ## Tests

Please update your PR description to include these sections, then push or re-save the description. The workflows will be approved on the next cycle.

[dwu96]

👋 Hi! This PR's description is missing some required sections from our PR template. Workflow runs won't be auto-approved until the description is updated.

Missing sections:

• ## Problem / Motivation
• ## Why it matters
• ## What changed
• ## Tests

Please update your PR description to include these sections, then push or re-save the description. The workflows will be approved on the next cycle.

[bolichen97]

Open PR relationship audit

This is a consolidated, point-in-time code-level audit note. It compares complete merge-base diffs and current/merged code; it does not treat a shared topic as duplication or partial coverage as completion.

Relationship findings

• This PR is OVERLAPPING with PR #5274. The goals differ or the implementations can complement each other; this is not a duplicate claim. Recommended action for PR #4085: REBASE. Independently valuable and not duplicative, but ordering matters: whichever lands second must re-run the glyph sweep over the other's new call sites, so the two authors should agree on the order. Files: website/src/apps/code-review-sage/components/ReportView.tsx.
• This PR is OVERLAPPING with PR #7977. The goals differ or the implementations can complement each other; this is not a duplicate claim. Recommended action for PR #4085: REBASE. The rebase is not mechanical here: it needs a decision on PR #7977's pinned recipe string, and that decision belongs in this PR rather than being discovered by red CI. Files: website/src/pages/chat/TranscriptScrollShell.tsx.
• This PR is OVERLAPPING with PR #8040. The goals differ or the implementations can complement each other; this is not a duplicate claim. Recommended action for PR #4085: REBASE. Different goals in the same files with overlapping test hunks; the second to land needs a real merge and a glyph pass over the other's new spinners. Files: website/src/test/AssistantMessage.test.tsx.
• This PR is OVERLAPPING with PR #8041. The goals differ or the implementations can complement each other; this is not a duplicate claim. Recommended action for PR #4085: REBASE. Base drift has already introduced a new violation outside the PR's file set; the guard cannot go green until the sweep is re-applied to current main. Files: website/src/components/SketchDialog.tsx.
• PR #7628 is OVERLAPPING relative to this PR. The goals differ or the implementations can complement each other; this is not a duplicate claim. Recommended action for PR #7628: KEEP. Textual adjacency only. A cosmetic glyph-standardization sweep and a new usage state are independent and both landable. Files: website/src/App.tsx.

No PR, Issue, label, branch, or review state was changed by the relationship-note portion of this audit.