Skeleton

import { Skeleton, SourcesSkeleton } from "@/ui";

Skeleton is a thin wrapper around MUI's Skeleton with the pulse animation: the block fades to 40% opacity and back every 2 seconds. You build a loading state by laying out several Skeletons in the shape of the content that will replace them.

Basic shapesCopy Anchor Link

Set width and height on every Skeleton. Numbers are pixels; strings such as "35%" also work.

<Skeleton width={160} height={20} />
<Skeleton variant="circular" width={32} height={32} />
<Skeleton width={94} height={32} className="rounded-lg" />

To match a button or card, change the radius with className, for example rounded-lg. In this app rounded-lg is 12px, not Tailwind's usual 8px, because the design tokens redefine --radius-lg.

Composing a loading stateCopy Anchor Link

Copy the layout of the real content: the same padding, gaps and line lengths. Vary the widths of text lines so they read as text, not as a grid.

// Integration card, from settings/integrations
<div className="flex flex-col gap-3 p-4 border rounded-xl">
  <div className="flex items-center gap-3">
    <Skeleton width={24} height={24} />
    <Skeleton width="35%" height={20} />
  </div>
  <Skeleton width="100%" height={16} />
  <Skeleton width="85%" height={16} />
  <Skeleton width={94} height={32} className="rounded-lg" />
</div>

// List row, from PageSkeleton
<div className="flex items-center gap-3">
  <Skeleton variant="circular" width={32} height={32} />
  <div className="flex flex-col gap-1.5">
    <Skeleton width={220} height={14} />
    <Skeleton width={140} height={10} />
  </div>
</div>

Swapping in the contentCopy Anchor Link

When the data arrives, replace the Skeletons with the real content in the same container, so nothing around it moves. Use "Load again" to repeat it.

<div className="integration-card" aria-busy={isLoading}>
  {isLoading ? <IntegrationCardSkeleton /> : <IntegrationCardContent integration={hubspot} />}
</div>

SourcesSkeletonCopy Anchor Link

A ready-made loading state for a four-column table: a header row and three body rows.

<SourcesSkeleton />

PropsCopy Anchor Link

No other prop is passed to MUI. style, animation, aria-* and children are ignored. Skeleton is a default export of its file and a named export from @/ui; import it from @/ui.

AccessibilityCopy Anchor Link

• Skeleton renders an empty <span> with no role or label, so screen readers skip it. That is right for the blocks themselves, but nothing tells a screen reader user that content is loading.
• Set aria-busy="true" on the container while it loads, and keep a heading or label outside the skeleton so people know what is coming.
• The pulse animation is not reduced for people who ask for reduced motion.

Do and don'tCopy Anchor Link

• Do use Skeleton when you know the shape of the result: a table, a list, a card grid, a settings form.
• Do keep the skeleton the same size as the content, so the page does not shift.
• Do import from @/ui. Three folders (settings/integrations, settings/user-management and my-profile) each have their own components/Skeleton.jsx, a hand-rolled animate-pulse div. Prefer the shared one in new code.
• Don't use a skeleton for a wait under about half a second. It flashes.
• Don't use one when you cannot predict the layout, such as a chat reply. Use a Spinner.