components/bits/SkeletonList#

SkeletonList()#

function SkeletonList(props): Element;

Placeholder rows shaped like the real content: same border, radius, left accent stripe, icon tile and text runs. Sizing the placeholder to the real row is what stops the layout from jumping when the data lands.

The shimmer is disabled under [data-reduce-animations]; the grey blocks alone still read as "not content", so nothing here depends on motion.

Parameters#

Returns#

Element

SkeletonListProps#

Properties#

count?#

optional count?: number;

gap?#

optional gap?: number;

Vertical gap between rows, in theme spacing units.

height?#

optional height?: number;

Row height in px. Defaults to the sharing PackageRow height.

variant?#

optional variant?: "row" | "card";

row — full-width list rows (packages, recipients). card — blocks sized for a grid cell (devices).