Skeleton
A pulsing placeholder block for loading states. Always prefer skeletons over spinners where possible — they preserve layout and communicate structure.
When to use
- Page load — show the page structure before data arrives.
- Lazy-loaded sections — skeleton for a card, avatar, or text block.
- Streaming content — while waiting for AI-generated or server-streamed content.
When NOT to use
- For instant interactions — if data loads in under 100ms, skip the skeleton.
- For indeterminate waits with no layout hint — use a spinner or progress bar.
Import
import { Skeleton } from '@mihcm/ui/Skeleton';Basic usage
Shape the skeleton with className to match the content it replaces.
<Skeleton className="h-4 w-48" />Common shapes
{/* Text line */}
<Skeleton className="h-4 w-64" />
{/* Avatar circle */}
<Skeleton className="h-10 w-10 rounded-full" />
{/* Card block */}
<Skeleton className="h-32 w-full rounded-lg" />Composition
- Match the skeleton's dimensions to the content it replaces — same height, width, and border radius.
- Use multiple skeletons with consistent spacing to mirror the final layout.
- Wrap in AspectRatio for image placeholders that maintain their ratio.