Skeleton is a visual placeholder block for loading content when the final layout is already known. Use it to preserve layout while cards, lists, table rows, dashboard widgets, chart areas, avatars, text lines, or media blocks are loading.
Use it for:
- Repeating the approximate shape and size of the UI that will replace it.
- Sizing placeholders with TailwindCSS utilities such as
h-*,w-*, andsize-*. - Using
roundedFullfor circular placeholders such as avatars.
Do not use Skeleton for unknown long operations, global route loading, blocking a local section, empty results, image fallback after load failure, or status text. Use ProgressBar, PageLoadingBar, ScreenLoader, BlockLoader, EmptyState, or ImagePlaceholder when those match the state better.