Loaders

Joule / Components / Loaders

Intro

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

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

Usage

Use loaders for Joule processing responses.

Don't

Don’t use loaders for user responses.
Don’t use loaders if the operation takes less than 10 seconds.

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.
Show only the most relevant information and keep it concise.
Keep status messages concise and allow for a grace period of 1-2 seconds before displaying the next status update.
Block users from sending a new message when Joule is still loading.
Avoid using more than one loading pattern at the same time.

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 user requests, a status message lets users know what Joule is currently processing.

Anatomy of long-running user request

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 user request

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 User Request

For long-running user requests with a loading time that exceeds 10 seconds, the loading chat bubbles along with status update messages should be displayed. Status updates should be concise and easy to understand.