Initial Loading

Do

• Show initial loading while loading Joule for the very first time.
• Show initial loading when switching between conversations.
• Show initial loading when initiating a new conversation.

Don't

Don’t change the input field variant used during the initial loading state. Messages can’t be sent during this time so the loading variant must be used.

A. Joule Logo Illustration

The Joule logo illustration is a pulsating icon that indicates something is processing.

B. Joule Header

The Joule header provides options to minimize or close the Joule panel.

C. Input Field

The input field allows users to start typing queries during the initial loading phase. The query cannot be sent until Joule is loaded.

D. AI Notice
The AI notice displays a disclaimer about the AI-generated content.

Anatomy of initial loading

If Joule fails to load during the initial loading phase, a processing error message is displayed, allowing the user to reload and try again.

Initial loading error state

When the user first starts Joule, they are presented with the initial loading view and can begin inputting their query. Once Joule has finished loading, the user is transitioned to the welcome screen.

Starting Joule then transitioning into the welcome screen after initial loading

When the user starts Joule (not the very first start), they are presented with the initial loading view and can begin inputting their query. Once Joule has finished loading, the user is transitioned to the last selected conversation.

Starting Joule then transitioning to a conversation after initial loading

When the user creates a new conversation, they are presented with the long loading view and can begin inputting their query. Once Joule finishes loading, the user is transitioned to the welcome screen.

Starting new conversation then transitioning into the welcome screen after initial loading

When a user switches between conversations, they are presented with the initial loading view and can begin entering their inquiry immediately. Once Joule finishes loading, the user is transitioned to the newly selected conversation thread.

Switching conversations then transitioning to the new conversation after initial loading

If a user closes the initial loading view after typing an inquiry and then reopens Joule, their inquiry remains in the input field, allowing them to continue editing.

Typing a query into the initial loading put field, then closing and reopening Joule