Feedback
Skeleton
Placeholders that breathe on the shared 2.2s shimmer rhythm. Static under reduced motion. A LoadingRegion holds them: a busy status named by its label, shown only once the wait is long enough to notice.
Live example
Import
Each family is its own entry point, so a page loads only what it uses.
import { LoadingRegion } from "@nibapp/ui/components/loading-region";import { Skeleton } from "@nibapp/ui/components/skeleton";Props
Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.
LoadingRegion
Where something is loading: a busy status region named by `label`, holding skeletons in the shape of what is coming. Mount it while the load runs and replace it with what arrives. It takes its place at once but shows only once the wait is long enough to notice (`useDelayedLoading`), so a quick load never flashes it and nothing moves when it does show.
| Prop | Type | Default | Description |
|---|---|---|---|
| label (required) | string | — | What is on its way, in words ("Loading changes"): the region's name for assistive technology. |
| rows | number | 0 | Placeholder rows of varied width, one per line of a list (files, changes, computers). |
| icon | boolean | false | Each row starts with an icon's square, as a file list's or a tree's rows do. |
| children | ReactNode | — | The placeholder's own shape, after any rows: a grid of figures, a chart, a board's columns. |
Also takes the props of a <div> element, except children, role, aria-busy and aria-label.
Skeleton
Loading placeholder. Size it with classes (`h-8 w-40`, `size-8`). Decorative — mark the loading region itself with `aria-busy` and announce completion there.
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | "rect" | "circle" | "text" | "rect" | |
| lines | number | 1 | Lines of text (implies the text shape); the last one is shorter. |
Also takes .