Skeleton animation
A skeleton dissolves into the real content, and never shows at all if the data is quick.
with <Cuts />
- Invoice 1040Paid
- Invoice 1041Paid
- Invoice 1042Paid
What moves
| When | What you see | Timing | How |
|---|---|---|---|
| The data arrives | Dissolve; no skeleton if it takes under 300 ms | 240 ms | LoadCut |
Install
Install LoadCut and wrap the part that changes: npx shadcn add @keyframery/load-cut.
Turn it off
Put data-cut="none" on a skeleton (or anything around it) to keep shadcn's own motion there. <Cuts responses="none" /> turns off every response across the app and keeps the cuts. With reduced motion, movement becomes a short fade or nothing.