Skeleton

Loading placeholders with animate-pulse. Reduced-motion users get a calm static block — that's in the token paste, not extra work.

plain CSS — works everywhere

PreviewCode

<div class="flex w-full max-w-sm items-center gap-3">
  <div class="size-10 shrink-0 animate-pulse rounded-full bg-muted"></div>
  <div class="w-full space-y-2">
    <div class="h-3.5 w-2/3 animate-pulse rounded-md bg-muted"></div>
    <div class="h-3.5 w-1/2 animate-pulse rounded-md bg-muted"></div>
  </div>
</div>

How it works

Muted shapes + animate-pulse. Match the skeleton’s geometry to the content it stands in for (circle for the avatar, bars for text) so the swap doesn’t jump.
The global prefers-reduced-motion rule from the token paste freezes the pulse for users who ask for less motion.
Add aria-hidden="true" if the real content is announced elsewhere, or aria-busy on the container while loading.