Loaders

Joule / Patterns / Loaders

Intro

Loaders let users know that something is coming. They can either be used for standard loading or long-running loading.

Standard loading (left) and long-running loading (right)

Usage

Use loaders for Joule processing responses.

Don't

Don’t use loaders for user responses.

If an operation takes more than 10 seconds, use long-running messages to let users know what Joule is doing behind the scenes.
If loading takes more than 10 seconds and no status updates have been received, use the default loading message.
Use the format [action or verb] + [noun] for long-running messages.
Keep the long-running message within a character limit of 55 characters.
Add status update(s) only when you know that the overall response time may take more than 10 seconds, and no more than 60 seconds.
Show Joule’s response as soon as the loading is finished.
Keep status messages concise and allow for a buffer of 1-2 seconds before displaying the next status update.

Anatomy

A. Loading Chat Bubble

The loading chat bubble consists of a busy icon, which are animated dots that indicate the Joule response to the user.

B. Clock Icon

The clock icon replaces the “Send” button during loading.

C. Status Message

For long-running loading, a status message lets users know what Joule is currently processing.

Anatomy of long-running loading

Behavior and Interaction

Blocking Messages When Loading

When Joule is processing a request, users are not able to send a message.

“Send” button replaced by clock icon when loading

During a loading sequence, users can continue typing in the input field. If they tap the clock icon, a snackbar appears to let them know Joule is still processing.

Snackbar appears when clock is tapped

Status Updates

When a status message is received from the backend, it is displayed immediately. If no status message arrives, a 10-second countdown begins, after which a default loading message saying "Working on your request" appears.

Status message during long-running loading

States

Success State

When a Joule response comes in, it is displayed immediately.

Error State

If loading fails or exceeds 60 seconds, an error message is displayed.

Error state for request time-out

Variations

Standard Loading

For standard loading with a loading time of under 10 seconds, only the loading chat bubbles are displayed.

Standard loading

Long-Running Loading

For long-running loading with a loading time that exceeds 10 seconds, the loading chat bubbles along with concise status update messages should be displayed.