Skeleton

A skeleton loader that displays a placeholder while content is loading

githubstorybook

Usage

import { Skeleton } from "#/ui/components/Skeleton"
<div className="flex gap-3 items-center">
  <Skeleton className="size-10 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="w-24 h-2.5" />
    <Skeleton className="w-16 h-2.5" />
  </div>
</div>

The skeleton is simply an empty div with a pulsing background. It’s designed to show a loading state for content that is being fetched from an API.

It does not automatically style itself to look like your element, so you’ll need to pass the appropriate classes to make it match your content.

It’s best to make it show the individual elements that will be loaded, rather than entire page sections.

For example, a text block might look like this:
Select Slider