Loading States
Loading states are essential elements in user interfaces that communicate to users that content is being loaded or an action is being processed. These indicators prevent confusion and frustration by setting appropriate expectations.
Button loaders
Use button loaders when submitting a form if the action will typically take less than 5 seconds. Examples include:
- Signing up for a service
- Searching for a flight
- Logging into your account
When using loading buttons make sure to include short descriptive text to demonstrate what is happening. Eg. “searching”, or “submitting”. The button loader is an available property within ba-button.
Skeleton loaders
Use skeleton loaders in the instance of updating information on the fly, within a single page application and without refreshing the screen. Examples include:
- Updating flight results
- Refreshing seat map status
- Updating a price within a section
This is a standalone component within BAgel.
Page loaders
Use page loaders when the action will typically take longer than 5 seconds, or if there is complex backend logic with multiple services interacting. Examples include:
- Checking someone in for a flight
- Processing a payment card transaction
Where possible, update the status message to be contextual with what is happening on the backend. Eg. “Reserving your seats” or “Checking you in”.
Guidelines
Good loading states can make users stick around to finish the task and generally have a more positive impression of your website or application. For loading times shorter than 5 seconds - use button loaders. For loading times longer than 5 seconds - use full page loaders.
Further reading:NNG Progress IndicatorsNot every interaction needs a loading state. If an interaction is almost instantaneous, it should not need a loading state.
Components
ba-button
Buttons are used for in page interactions such as submitting a form or showing/hiding content
ba-loading-skeleton
Use ba-loading-skeleton to show a loading animation on individual sections
ba-loading-page
Use ba-loading-page to show a full screen loading banner