Skeleton

Shimmer-animated placeholder shapes for loading states. Three primitives (block, text, circle) and three composites (Chart, Table, Card) cover all common dashboard loading patterns.

Primitives
Block
Text
Circle
Composites
SkeletonChart
SkeletonTable
SkeletonCard

Interactive Variant Toggle

Usage

JSX
import { Skeleton, SkeletonChart, SkeletonTable } from '@so.boss/gloss-ui';

// Primitive variants
<Skeleton variant="block" width={200} height={20} />
<Skeleton variant="text" lines={3} lineHeight={14} gap={8} />
<Skeleton variant="circle" size={40} />

// Composites
<SkeletonChart bars={10} maxHeight={120} />
<SkeletonTable rows={5} columns={4} />
<SkeletonCard variant="value" />

Props Reference

Skeleton (Primitive)

PropTypeDefaultDescription
variant'block' | 'text' | 'circle'—Discriminated union variant selector
widthnumber | string'100%'Width (block variant only)
heightnumber | string16Height (block variant only)
sizenumber40Circle diameter in px (circle variant only)
linesnumber3Number of text lines (text variant only)
borderRadiusnumber | string—Custom border radius (block variant only)

Composite Components

ComponentKey PropsDescription
SkeletonChartbars (number, def 10), maxHeight (number, def 120)Bar chart silhouette with varying-height bars
SkeletonTablerows (number, def 5), columns (number, def 3)Table skeleton with header and configurable rows/columns
SkeletonCardvariant ('value' | 'trend' | 'target'), colSpan (number)Metric card skeleton matching MetricCard layout