When to use
- Use the loader when there is a delay in content loading that may take more than a few seconds, to provide users with feedback that the system is processing.
- Ideal for situations where important content or actions are being fetched or processed, such as during flight searches, bookings, or data retrieval.
- Use it when you want to ensure that users remain engaged and informed while waiting for the next page or content to appear.
When not to use
- Avoid using the loader for short delays (less than a second), where the content loads almost immediately, as it may disrupt the user experience.
- Do not use the loader when the user can interact with other parts of the page while waiting. In these cases, inline or small loaders might be more appropriate.
- Don’t use if it’s unnecessary for the user to know the system is processing in the background, such as minor updates that don’t impact the primary flow.
Placement
The loader should be placed in the middle of the page, where the main content will appear once loading is complete. This ensures that users’ attention is focused on the loader and where the content will eventually be presented, providing a clear indication of where to expect the next information.
Accessibility considerations
Ensure that the loader is screen-reader accessible, by providing appropriate aria-live regions or aria-busy attributes, so assistive technologies can announce that the page is loading.
Avoid relying on just the visual loader. Make sure to include text descriptions (e.g., “Please wait…”) to communicate the loading state to users who may have visual impairments or rely on screen readers.