Components / Spinner
Spinner
Indeterminate loading with no known end point: a save in flight, a route resolving, a full-panel load. For the next page of an infinitely-scrolling list use InfiniteLoader, never a bare Spinner — it owns the centring and the padding. For determinate work use Progress. To signal an agent is live/working (not loading) use ThinkingOrb; for the streaming chat work-line use WorkingStatus.
import { Spinner } from '@layers/ui/spinner'Rendered stock
House rules
- The canonical loader is the stock shadcn Spinner — a spinning LoaderCircle. Size it with `size-*`, color it with `text-*` (defaults: size-4, currentColor). Never hand-roll a raw `animate-spin` icon.
- Full-panel loads center a larger Spinner (`size-8 text-muted-foreground`) in the region; inline loads sit at the default size-4. A next-page load is InfiniteLoader, not a Spinner you place yourself.
- A save shows its Spinner on the explicit Save action via the Button `loading` prop; no optimistic saves.
- This is a loader, NOT a status signal. The live-agent glyph (ThinkingOrb) and the streaming work-line (WorkingStatus) are separate components — never reach for a Spinner to mean "live" or "working".