Visual indicator
A clear representation that content is loading or in progress of change
Text
Explaining the loading state
⭐️ Let the standard 'loading' text be a fallback, and try to be more specific e.g. 'adding your contacts, syncing your emails'
Time
Determine how long the time between two actions must be to require a loading component
⭐️ Don't interrupt two actions that instantly transition, but if there's a known 5 second period between two actions then the component is appropriate
Accessibility
Ensure your loading state can be clearly seen
⭐️ Place the loading indicator in a container to ensure accessibility, regardless of background
⭐️ If the loading indicator is on its own, create a version appropriate for light/dark backgrounds
Visuals
Entertain the user with an illustration during the loading state
