Avala Design
← Components/primitives

Skeleton

Carbon ships three skeletons: Skeleton — base wrapper around any shape (block, circle, etc.) SkeletonText — pulsing horizontal lines for text placeholders SkeletonPlaceholder — fillable rectangle for image / chart placeholders

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Skeleton, SkeletonPlaceholder, SkeletonText } from "@avala/design";

<Skeleton>
  <SkeletonPlaceholder />
  <SkeletonText />
</Skeleton>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-skeleton--defaultOpen in Storybook →

When to use

  • Maintain layout stability while async data loads — list rows, cards, dashboards, dataset thumbnails.
  • Shape matches the eventual content; user perceives faster load.

When not to use

  • Indeterminate spinner without specific layout shape → use `Loading`.
  • Determinate progress (with known % complete) → use `ProgressBar`.
  • Quick interactive feedback inside a button or row → use `InlineLoading`.