Guidelines
When to use
- Loading data: Use the Skeleton component to visually indicate loading states when fetching data from a server or performing other asynchronous operations.
- Improving user experience: Implement Skeletons to keep users engaged and reduce the perception of loading time by showing content placeholders instead of blank spaces.
- Longer loading time: Use it when you expect a data request or operation to take longer than ~2 seconds, so users aren’t left looking at an empty area while waiting.
Use the Sekeleton when fetching Data from a server.
Use a Spinner for simple content of for saving actions.
When not to use
- Static content: Avoid using the Skeleton components for static content that does not require loading or asynchronous data fetching.
- Simple interfaces: With simple interfaces or minimal loading times, Skeletons may not add significant value and could be unnecessary. Use the Spinner instead.
- Performance overhead: Consider the performance impact, as implementing Skeletons adds additional rendering tasks; avoid using them if the overhead outweighs the benefits.
- Feedback components: Feedback components such as Alerts and Tooltips, should not use Skeletons.
Avoid using Skeleton components for static content.
Use the Skeleton for dynamic content, and display static content as is.
Placement
Apply Skeletons to individual components or data regions (e.g., a table body, card, or list), not to the entire page layout. This keeps navigation and other page‑level controls available so users can cancel or change their action while data is loading.
Content
Skeletons are a form of loading state, so while the screen is loading, when possible, maintain the static content that has already loaded.