skeleton

Display a skeleton whilst another component is loading.

If you do not pass a fixed size, it will be calculated automatically.

Set show={false} to reveal children once loaded; the dimensions are retained so there is no layout shift.

Pass the button prop to extend the shell by 1px, covering button borders cleanly.

Best Practices

When to use

• Show a Skeleton when async data fills a known layout: table rows, card grids, profile blocks, sidebars.
• For a single in-flight action, use Spinner; for an indeterminate inline wait, use loading dots; for known progress, use Progress.
• Don't use Skeleton as permanent decoration or as a placeholder for empty states. When there's no data to load, render an EmptyState.

Behavior

• Set width and height to match the final content so the layout doesn't shift when data resolves.
• Pick pill, rounded, or squared to mirror the eventual element's shape.
• When the skeleton wraps children, keep dimensions stable so the reveal swap doesn't reflow surrounding content.

Accessibility

• Wrap the loading region in aria-busy="true" and announce completion with aria-live="polite" on the destination container.
• Disable the shimmer with animated={false} on low-power surfaces and respect prefers-reduced-motion.
• Skeletons are decorative; avoid placing focusable controls inside them while loading.