Skeleton
Pulsing placeholders shaped like the content that's on its way, for calmer loading states.
Usage
import { Skeleton } from '@vitnode/core/components/ui/skeleton'<Skeleton className="size-12 rounded-full" />
<Skeleton className="h-4 w-full" />Size and shape it with className. It's a muted block with rounded corners
and nothing else.
Match the real layout
Build the skeleton from the same parts as the loaded UI, so nothing jumps when the data arrives.
<div aria-busy={isLoading}>{isLoading ? <ThreadSkeleton /> : <Thread />}</div>Accessibility
- A skeleton is decoration and ships with
aria-hidden="true". Mark the region that's loading witharia-busy="true"instead. - The pulse only plays when reduced motion is off. Otherwise it holds still.