Skeleton
Base and composed loading skeletons.
Variant
text
circle
rect
Loading toggle
This text is hidden while loadingThis text is visible (loading=false)
StatCardSkeleton
TableSkeleton
ListRowSkeleton
CardSkeleton
FilterBarSkeleton
StatsBarSkeleton
SegmentedSpendInsetSkeleton
Developer
import { Skeleton } from "@financial-tracking/design-system"API reference
Composed helpers (StatCardSkeleton, TableSkeleton, ListRowSkeleton, CardSkeleton, FilterBarSkeleton, StatsBarSkeleton, SegmentedSpendInsetSkeleton) wrap the base Skeleton.
| Prop | Type | Default |
|---|---|---|
variant | "text" | "circle" | "rect" | "text" |
loadingWhen false, renders children instead of the placeholder. | boolean | true |
width | string | number | — |
height | string | number | — |
childrenShown when loading is false; measured when loading is true. | ReactNode | — |