Skeleton

​

Skeleton

​

When to use

• While structured content (cards, lists, tables, charts) is loading and you know the approximate layout.
• To avoid empty flashes or jumping layouts when async data arrives.
• Inline with partial page content where only a section is pending.

​

When to use something else

• Full-page or unknown-structure loading: use Page loader.
• Measurable progress: use Progress.
• When content failed to load: use Empty state or Alert.

​

Behavior

• Match skeleton shapes to the final UI (text lines, avatars, chart blocks) so the transition feels continuous.
• Replace skeletons with real content or an error state as soon as the request resolves.

​

Often used with

• Card, Data grid, Chart, Avatar.