Loading States
Loading states help communicate that when the app is processing a request.
- Should be used to communicate that the app is processing a request
- Two types: skeletons and spinners
- Skeletons show when a page is initially loading
- Spinners show when a request is being processed in result of a user action
Examples
This is a description of something.
Trash content
Trash content is a place where you can find all the content that you have deleted. You can restore or permanently delete the content from here.
The skeleton shows the page is taking longer than expected to load the initial content.
This is some data about something
This is a detail about that text of something.The spinner loader shows the page is processing a request from a user action.
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
- Execution depends on context:
- Skeletons show when a page is initially loading
- Spinners show when a request is being processed in result of a user action
- Try to use SSR for initial page loading and data-fetching on the client for user actions.
- Page content should not switch between Skeletons and Spinners.
Skeletons
Skeleton's are displayed when an application is taking longer than expected to load an initial page.
This is a description of something.
Trash content
Trash content is a place where you can find all the content that you have deleted. You can restore or permanently delete the content from here.
This typically doesn't happen when utilizing server-side rendering (SSR) for page loads.
Spinners
Spinners are used when a user triggers a request to the server by using an action.
This is some data about something
This is a detail about that text of something.The page content should remain static until the new data has arrived.
On this page
Skeletor API
To show a skeleton loading state, simply add the aria-busy attribute to the element you want to show the loading state for.
<div aria-busy="true"> <p>This is now hidden</p></div>This is a description of something.
Trash content
Trash content is a place where you can find all the content that you have deleted. You can restore or permanently delete the content from here.
Spinners
This is some data about something
This is a detail about that text of something.Customization
The Spinner component is a simple SVG element that can be styled with CSS.
API
export type SpinnerProps = SVGProps<SVGSVGElement> & { size?: number | string}
define function Spinner(props: SpinnerProps): ReactNodeProps
The Spinner component accepts the same props as an SVG element.
| Name | Default | Description |
|---|---|---|
| size | A strict height and width of the Spinner. |
On this page
Use Cases
- Users should be able to:
- Recognize loading states in contrast to page content
- Have clear indicators with the use of aria attributes
On this page