Loading states

A stock skeleton blinks on for a moment even when the data is fast, then snaps to content of a different height, and the page jumps. LoadCut fixes both.

InstallCopy Anchor Link

npx shadcn add @keyframery/load-cut

If your project doesn't know @keyframery yet, do the Quick start first.

UseCopy Anchor Link

Wrap the content, and pass your loading flag and skeleton:

import { LoadCut } from "@/components/keyframery/load-cut"
import { Skeleton } from "@/components/ui/skeleton"

<LoadCut loading={isLoading} skeleton={<Skeleton className="h-32" />}>
  <RevenueChart data={data} />
</LoadCut>

You should seeCopy Anchor Link

• Fast data: no skeleton at all. The content just appears, and nothing on the page jumps.
• Slow data: the skeleton shows, then dissolves into the content while the height eases from one to the other.

OptionsCopy Anchor Link

Good to knowCopy Anchor Link

• LoadCut waits --kf-hold (300 ms) before it shows the skeleton. During the wait the space is reserved but empty, so nothing jumps.
• Once shown, the skeleton stays at least 400 ms, so it never flashes, then dissolves over 240 ms.
• LoadCut sets aria-busy while loading.

In film, one shot fading into the next is a dissolve.