Loading & motion
One skeleton treatment for pages, sections, forms, lists, tables, and account controls.
Choose the variant matching the incoming content and give it a specific accessible label. Keep already loaded content visible while a user action is pending. Motion settings live in src/lib/motion.ts; see docs/LOADING_MOTION.md.
src/components/loading/content-skeleton.tsx
Skeletons reserve space for incoming content. Once content is available, keep it visible during saves and updates and put feedback on the affected control.
The preview imports your production components. Open Code for the complete working example, including its imports.
Use Tab to inspect keyboard focus, switch themes, and try the controls. Reset restores the example’s initial state.