Anatomy
- Skrim: A semi-transparent layer that covers the entire screen, often used to temporarily block and dim the underlying content.
- Spinner: A visual indicator that the system is thinking
Usage Guidelines
When to use this component
- Use a loading overlay when the user is waiting for content to load that is essential to the page's function. This prevents users from interacting with incomplete or broken content.
- Use a loading overlay when a user has performed an action that requires a backend process and they need to wait for a response before proceeding.
- Use a loading overlay for processes that may take several seconds, such as fetching a large amount of data or submitting a complex form.
When not to use this component
- Do not use a loading overlay for processes that are instantaneous or take less than a second. A quick spinner or a simple change in the button's state is more appropriate.
- Do not use a loading overlay when only a small portion of the screen is loading. Use a local loading indicator (like a spinner within a card or a button) to avoid obscuring the entire page.
- Do not use a loading overlay to cover the entire page if the user needs to reference content that is not yet loaded. This can be frustrating for users.
General Component Behaviors
See the Spinner for full component behaviors.
Known Gaps
- Accessibility guidelines