| Surface | Variant + size | Notes |
|---|---|---|
| Inside button (Save, Send, Update mid-flight) | utility sm (16 px) | Replaces the action icon. Buttons disable submit + cancel. |
| Inline status text ("Saving…", "Searching…") | utility sm (16 px) | Sits next to text. |
| Search input async indicator | utility sm (16 px) | Right-side of the input. |
| Table refetch (data already shown) | branded md (48 px) overlay proposed: dim rows 50% | Overlay with no scrim. Rows fade to 50% opacity so loader pops, data still readable. |
| Empty-state during first load | branded md (48 px) proposed currently lg on Allocations | Loader on page background, no card. Card is for empty-state copy only. |
| Section panel / dialog content first load | branded md (48 px) | Centred in the panel. |
| Full-page first-paint / auth splash | branded lg (72 px) | Centred over a calm background. |
| Heavy compute (route optimise, fatigue rebuild) | thinking md or lg | Orbit + intermittent kangaroo glitch. |
1. Inline + buttons — utility sm (16 px)
Inside-button spinners (Save, Send, etc.) and inline status text. Replaces the action icon during in-flight; sits next to copy.
2. Table refetch — the open question approve
When a table is refetching, the existing rows should stay readable but the loader needs to be unmistakable. Three options. We had #1 (full scrim, rejected); current is #2 (no scrim, loader floats on full-opacity rows); proposed is #3 (dim rows to 50%, loader pops, data still legible).
3. Empty-state during first load — the size question approve
When a page has no rows yet AND is fetching for the first time, what loader fires? Allocations currently uses 72 px (lg) which is the splash size, breaking the system. Proposal: 48 px (md) to match every other panel-level empty-state. The card chrome stays for the truly-empty copy ("no_allocations_to_show") but is dropped during the fetch — the page background carries the loader.
4. Empty-state with copy (no fetch) — for reference
When the page is genuinely empty and not loading, the card chrome stays. Loader is gone; copy carries the message.
No allocations to show
No allocations to show
5. Section panel / dialog content — branded md
Loading inside a panel (route detail, settings panel, dialog body). Loader on the panel surface, no scrim.
6. Full-page first-paint / auth splash — branded lg
The big moment. App boot, login splash, the cold start where the brand impression matters. This is the only place lg fires.
7. Heavy compute — thinking md / lg
Route optimisation, fatigue rebuild — actual processing. Same orbit as branded, plus a brief 300 ms shake on the kangaroo every 3 s. Reads "the system is reasoning".
- (a) Allocations empty-state-during-fetch goes from 72 px → 48 px. Y / N.
- (b) Table refetch dims rows to 50% opacity (200 ms ease) so loader stands out. Y / N.