Inline alert to indicate loading for a page

Author: Joy Jean | Last edit: May 07, 2024 | Design type: Alerting, Loading state | Product area: Managed Infrastructure

Inline alert to indicate loading for a page

For a page that needs to connect to multiple endpoints to generate information, it may take more than a couple seconds to load. In my example, it depends on number of regions a customer's organization has access to, and the loading time cannot be previously determined.

For more simple loads, refer to this UXD Hub post about loading states.

This will follow the guidance from the link above, but also provide more indication that just the regular spinner and skeleton states by adding an inline notification with more information helps with informing the user of the incomplete state of the page. 

The information in the inline alert will change depending on the progress. 

When loading is complete, the message will change and also be dismissable.