When should you use skeleton UI instead of a spinner?
Use skeleton UI (ghost placeholders) when the screen will show many records — lists, tables, CRM rows, kanban cards, or dashboard widgets. Skeletons keep layout stable while data loads so users can scan structure immediately. Spinners are better for short, atomic actions (save, submit, one file upload) where there is no dense content shape to preview.
Skeletons vs spinners on dense screens.
| Option | Best for | Layout stability | Cost to produce | Honest trade-off |
|---|---|---|---|---|
| Skeleton / ghost UI | Lists, tables, feeds, dashboards | High — placeholders match final chrome | Needs a layout template (or a generator) | Wrong skeleton shapes feel fake; keep roles simple |
| Centered spinner | Short actions, modal submits | Low — page often jumps when content arrives | Trivial CSS | Fine under ~1s; frustrating on long list loads |
| Ghost Wireframe Generator | Landing chrome + loading skeletons for HTML | Exports match desktop/mobile layouts | Free, browser-local | Library mode only in v1 — no SVG-from-Figma convert yet |
Why lists and tables prefer ghosts.
Dense UIs communicate hierarchy through rows, columns, and cards. A spinner erases that hierarchy until the request finishes. Ghost bars and blocks let users orient — “this is a table with filters,” “this is a kanban board” — before real data arrives. That is why product teams ship loading skeletons for CRM and analytics views, not only for marketing mockups.
Export a loading skeleton in under a minute.
- Open Ghost Wireframe Generator.
- Pick a CRM table, analytics, or dashboard layout — use Combo if you need desktop + mobile.
- Tune colour roles to match your product surface, then Copy HTML (includes
--ghost-*variables). - Optional: get the Ghost Wireframe Skill for the same contract in your editor.
Read the full walkthrough in the Ghost Wireframe Generator guide.