Skeleton
A placeholder loading animation for content that is not yet available.
Import
import { Skeleton } from "@retents/ui/skeleton"Usage Guidelines
When to use
- To show a placeholder while content is loading, preserving the layout shape so the page doesn't jump on load.
- For initial data fetches where you know the shape of the content (e.g., a user profile card, a list of items).
- When the loading state will be brief (under a few seconds). For longer waits, combine with a text indicator.
When NOT to use
- For full-page loading — use a spinner or Progress bar instead.
- When the content shape is unpredictable — a generic spinner is more honest.
- As a permanent placeholder for missing data — show an empty state message instead.
Preview
Card skeleton
A realistic card loading skeleton with image, text, and action placeholders: