Loadingcomponent

Animated loading spinner shaped like a Heroicon — a faint track plus a rotating indicator arc.

• Self-contained inline SVG; the spin is driven by an inline SMIL <animateTransform>.
• The track and indicator paint from scaled steps of the current tint ladder (--tint-70 / --tint-80), so their colour follows whatever tint <Icon> (or an ancestor) sets.
• Takes only className like the Heroicons, so it slots straight into <Icon icon={Loading} /> to pick up icon sizing, colour, and centring.

An animated SVG spinner shaped like a Heroicon — a faint full track plus a rotating indicator arc. It takes only className, so it behaves like any other icon and is meant to be styled by <Icon>.

Things to know:

• The track and indicator paint from scaled steps of the current tint ladder (--tint-70 / --tint-80), so the faint track and brighter indicator both follow whatever tint <Icon> (or an ancestor) sets, correctly shaded.
• The spin is driven by an inline SMIL <animateTransform>, so it needs no CSS to animate.
• Feed it to <Icon> to size, colour, and centre it: <Icon icon={Loading} size="large" status="loading" />. <Icon status="loading"> already uses it automatically.
• LOADING is a pre-keyed <Icon icon={Loading} /> element with a stable key — drop it straight into Suspense fallbacks and lists to avoid unnecessary reconciliation overhead.

Usage

import { Icon, LOADING, Loading } from "shelving/ui";

// Styled through <Icon>, like any other icon.
<Icon icon={Loading} size="large" />

// <Icon status="loading"> uses it for you.
<Icon status="loading" />

// Pre-keyed constant for fallbacks and lists.
<Suspense fallback={LOADING}>
  <SlowComponent />
</Suspense>

{busy ? LOADING : children}

Styling

Size, centring, and overall colour come from wrapping it in <Icon> — its --icon-color / --icon-size hooks and color / status / size / tint variants drive the spinner (see the Icon Styling section). On top of that, the two arcs expose their own hooks:

Global tokens it reads — the tint-ladder steps --tint-70 / --tint-80 for the arc strokes (rebound by the color / status / tint variants on the wrapping <Icon>).