Initial Loading
Joule / Patterns / Initial loading
Intro
The initial loading pattern allows users to begin inputting their query while Joule is loading. This reduces perceived wait time and gives users the freedom to jump-start their tasks without blocking interaction.
Initial loading view in compact Joule panel (left) and expanded Joule panel (right)
Usage
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.
Anatomy
A. Joule Logo Illustration
The Joule logo illustration is a floating 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
States
Initial loading error state
Behavior and Interaction
Cold Start
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
Warm Start
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
New Conversation
When the user creates a new conversation, they are presented with the initial 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
Switch Conversations
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
Close Joule
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
Adaptive Design
Initial loading follows the same responsive behavior as the Joule panel.