Loading
A composed loading-placeholder pattern for lists, cards, and stacks. Skeleton is the atom; Loading is the canonical molecule most surfaces want.
List loader (default — 4 rows)
Card loader
Stack loader (chat / contacts)
Installation
pnpm dlx @hex-core/cli add loadingCard loader
Card-shaped placeholder with heading + 2 body lines
<Loading variant="card" />Stack loader (chat / contacts)
Avatar + 2-line text rows
<Loading rows={4} variant="stack" />Variant values
variantLayout family for the placeholder rows.| Value | Description |
|---|---|
listdefault | Single full-width line per row — table / list / sidebar nav loaders. |
card | Heading + two body lines inside a bordered card surface. |
stack | Avatar + two-line text block per row — message / contact / search-result loaders. |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "list" | "card" | "stack" | list | Layout family — picks the row shape. |
rows | number | 3 | Number of placeholder rows to render. Each row may contain multiple Skeleton elements depending on variant — list emits 1 per row; card emits 3 (heading + 2 body lines); stack emits 3 (avatar + 2 text lines). |
label | string | Loading… | sr-only label announced by screen readers via aria-live polite. |
className | string | — | Additional CSS classes |
AI Guidance
When to use
Use when fetching data for a list, card, or avatar-paired stack and you want pre-arranged placeholders. Pair the rows count with how many items you expect — avoid 10-row loaders for 2-item results (jarring on resolve).
When not to use
Don't use for a single shaped placeholder (use Skeleton). Don't use when the wait has a measurable percent-done (use Progress). Don't use for full-page transitions where a top progress bar is more informative.
Common mistakes
- Forgetting `aria-live` would prevent screen-reader announcement — Loading already wires it; don't override role
- Using too many rows — flashes a heavy 'something's wrong' impression
- Applying Loading inside a Card AND also wrapping in another Card — double-bordered shimmer
Accessibility
role='status' + aria-live='polite' + sr-only label, so screen readers announce on first render. Caller doesn't need to wire any of this.
Related components
Token budget: 300
Verified against @hex-core/components@1.9.0