Skeleton

Pulsing placeholder block for loading states. Reach for it when you know the shape of the content that's coming and want the layout to hold still as it loads — mirror the real element's size and position so nothing shifts on arrival. Prefer Progress for a determinate task with a known percentage, and a spinner for a brief, shapeless wait. Skeleton has no variants or sizes; set every dimension via className — h-4 for a text line, size-12 rounded-full for an avatar, larger blocks for cards and media.

In progress

This component was ported from shadcn. The API is stable; Tidal-specific theming may still evolve.

Default

<Skeleton className="h-4 w-48" />

Card placeholder

<div className="flex items-center gap-4">
  <Skeleton className="size-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-40" />
    <Skeleton className="h-4 w-24" />
  </div>
</div>

Props

Prop	Type / note
className	string — set width/height/shape (e.g. `h-4 w-32`, `size-10 rounded-full`)
...rest	Standard `<div>` attributes are forwarded.

Source

packages/react/src/components/skeleton.tsx · adapted from shadcn