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.

More about 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.

More about ba-loading-skeleton

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”.

More about ba-loading-page

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.