Why loading states matter
While data loads, the screen must say something. A blank page feels broken and a spinner alone gives no sense of what is coming. A skeleton shows gray placeholders shaped like the real content so the wait feels shorter and the layout stays stable.
- Skeletons mirror the final layout to prevent a jarring shift
- They set expectations about what will appear
- They reduce perceived wait by showing structure early
Choosing the right indicator
- Use a spinner for short unpredictable waits like a button submit
- Use a skeleton for content heavy areas like cards and tables
- Use progress when you can measure completion like an upload
State decision
Avoiding layout shift
Reserve space for incoming content so swapping skeleton for data does not push the page around, which protects against cumulative layout shift and accidental misclicks.
Key idea
Show skeletons that mirror the final layout for content areas and spinners for short waits, reserving space so the swap to real content never shifts the page.