> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Skeleton

> Placeholder shapes that indicate loading content before data is available, reducing layout shift and perceived wait time.

## Skeleton

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-skeleton--docs)

### 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](/aura-design-system/primitives/page-loader).
* Measurable progress: use [Progress](/aura-design-system/primitives/progress).
* When content failed to load: use [Empty state](/aura-design-system/primitives/empty-state) or [Alert](/aura-design-system/primitives/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](/aura-design-system/primitives/card), [Data grid](/aura-design-system/primitives/data-grid), [Chart](/aura-design-system/primitives/chart), [Avatar](/aura-design-system/primitives/avatar).