Loading
Two primitives for in-flight states. <DSSpinner> is the inline indicator — drop it into a button label, a toolbar, or anywhere a small "in progress" cue is needed. <DSLoadingPanel> is the panel-sized variant — a centered spinner with a mono caps caption that fills async lists and grids while data is fetched.
DSSpinner
Three sizes — sm for inline mono / button labels, md for body, lg for panel-scale headings.
Sizes
Sizes track the system type scale: sm (12px) sits next to mono caps text, md (18px) sits in body copy, lg (28px) anchors a loading panel.
Inline in a button
The spinner inherits its color via currentColor, so it picks up whatever the surrounding text uses. Pair with a label change ('Saving…') for an accessible loading state.
Inline in mono / labels
The spinner color follows currentColor, so it matches mono-caps annotations or status text without a separate color prop.
DSLoadingPanel
Panel-scale loading: spinner + caption centered in a min-height block.
Default panel
A 12rem panel with the default 'Loading…' caption. Drop this directly inside a card body or list region while data is fetched.
Loading…
Custom caption
The caption is mono caps and tertiary ink — describe what's loading in three or four words. Skip the trailing ellipsis if you'd rather the line read clean.
Compiling resume preview
Tall panel
Pass `min-height` to fill a larger region — the spinner stays centered. Use this for full-column loading inside a builder or dashboard layout.
Loading career data
Without caption
Pass an empty caption when the surrounding context already tells the user what's happening. The spinner alone fills the panel.