SkeletonList
List-shaped placeholder shown while data loads: rows of one or two lines, with an optional leading circle.
Props
SkeletonList extends HTMLAttributes<HTMLDivElement>.
| Prop | Type | Default | Description |
|---|---|---|---|
rows | number | 4 | How many rows to draw. |
avatar | boolean | — | Leading circle, for rows that carry an avatar or a status glyph. |
lines | number | 2 | Text lines per row. Use 1 for a label or 2 for a label and description. |
trailing | boolean | — | Right-aligned block, for rows ending in a value, tag or timestamp. |
animation | SkeletonAnimation | "shimmer" | "shimmer" | "pulse" | "none". |
Line widths follow a fixed four-step cycle rather than random values: a random width would be re-rolled on every render and jitter while the data is still in flight.
Examples
Feed rows
Single-line rows
Calmer animation
A page with several skeletons running at once reads better on pulse; multiple independent shimmer sweeps are a lot of motion for an empty screen.
import { SkeletonList } from "@solarius/onset";
{
loading ? (
<SkeletonList rows={6} avatar trailing />
) : (
<ActivityFeed items={items} />
);
}See SkeletonTable for tabular data and LoadingOverlay when the list is already on screen and only being refreshed.