#Skeleton

A content-shaped placeholder for a region whose layout you know but whose data has not landed — it shortens the perceived wait and stops the page jumping when the content arrives. Reach for it on the first or full load of a page, list, card or table; a single inline wait is a Loader, a measurable one is Progress, and a wait under a second wants nothing at all. Never put a skeleton and a spinner in the same region. The root is aria-hidden, so the loading announcement has to come from a live region of your own.

Source · Storybook

#Usage

import { Skeleton } from '@wallarm-org/design-system/Skeleton';

#Examples

#Shapes

Standalone boxes built to match the real components beside them. The point of the comparison is the measurements: a placeholder that is not the content’s size is what makes the page jump on swap-in.

#Wrap

The cleaner way — wrap the real content and toggle loading. The skeleton takes the content’s exact box, so there is nothing to keep in sync by hand.

#Transparent

transparent, the default, animates over invisible content so the surface behind shows through; transparent={false} fills the box with surface-1.

#Props