Components / Composition
Loading
Paints real components as their own skeleton while data loads, with no layout shift.
@fabrials/ui
Accounts
- NWNorth workspaceTeamCurrent
- RSRelay stagingPersonalStale
- ARArchiveTeamPaused
Synthetic data. Refresh shows the same list as its skeleton for two seconds.
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { Loading, placeholderText, placeholderList, useLoading } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
when | boolean | Shows the skeleton. The children stay mounted, so nothing moves when it turns off. |
label | string | What assistive technology hears while it loads, e.g. Loading accounts. |
placeholderText(length, seed?) | string | Invisible placeholder copy that wraps like real words. |
placeholderList(count, make) | T[] | Placeholder records for lists and tables. |
data-skeleton | keep | hide | block | fill | On any element inside: paint as usual, leave empty, one block, or a solid shape. |
Behavior
Only paint changes (display: contents wrappers), so any width or content matches the finished view. Content is inert while loading and a status message names what loads; the pulse follows reduced motion. See the loading states guide.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.