Astryx Design System

Skeleton@astryxdesign/core v0.0.15 · Skeleton

Usage

An animated shimmer placeholder that previews the shape of content while it loads. Use it to build loading screens that match the layout of the real content. For content with unknown dimensions, use Spinner instead.

ts
import {Skeleton} from '@astryxdesign/core/Skeleton'

Best practices

Guidance	Practices
Do	Match the size and shape of the content being loaded to create a realistic placeholder.
Do	Stagger multiple skeletons with the `index` prop for a natural wave animation.
Don't	Use when the content dimensions are unknown; use Spinner instead.
Don't	Combine with a Spinner on the same content area; pick one loading pattern.
Don't	Show skeletons indefinitely; if loading takes too long, show an error or empty state instead.

Examples

Common configurations, variations, and states.

Skeleton — Card Loading

Card skeleton with avatar, name, and content lines.

Skeleton — Staggered List

Staggered skeleton lines with varying widths.

Skeleton — Table Rows

Table skeleton with staggered column widths.