Guidelines
When to use
- Quick tasks: Use the Spinner for tasks that are expected to take a short time to be completed.
- Small data updates: Ideal for fetching or updating small pieces of information, like status updates.
- Feedback for user actions: Use the Spinner to let users know their actions are being processed.
When not to use
- Multi-task focus: Avoid using the Spinner on more than one item or action at a time.
Spinner vs. Skeleton
Avoid using the Spinner for entire page loads; use the Skeleton component instead.
Spinner vs. Button loading state
Use a Button in the loading state when the user initiates an action and has to wait for its completion. This provides clear feedback that their action has been acknowledged and is being processed. Use a Spinner when the loading process is automatically generated or background-related. This requires no immediate user input but still indicates ongoing activity.
Content
Spinners do not require content, however in guest-facing screens content can be used to improve the overall experience of using our products. In appropriate instances, take the opportunity to entertain the guest with relevant content.
Do
- Include relevant, informative, or entertaining messages.
Do not
- Write long sentences for user to read.