AI Loading UX

Design patterns for showing users what's happening while waiting for AI output.

Decision Framework

First, identify which pattern category applies:

User is waiting for...

Pattern Category

Key Goal

AI reasoning/thinking

Reasoning Display

Build trust through transparency

Multi-step task completion

Progress Steps

Show advancement toward goal

Content generation/streaming

Streaming States

Reduce perceived wait time

Background processing

Status Indicators

Confirm work is happening

Core Principles

1. The Elevator Mirror Effect

Users waiting for AI feel time pass slower. Give them something to watch/read—animated indicators reduce

perceived

wait time even when actual time is unchanged.

2. Progressive Disclosure

Show condensed indicator by default ("Thinking...")

Make details

available

but not forced

Let curious users expand; don't burden everyone

3. More Transparency ≠ Better UX

Balance visibility with cognitive load. Users want answers, not reasoning—but they want to

trust

the answer came from good reasoning.

4. Signal Completion Clearly

Users must know when processing ends. Ambiguous end states frustrate users.

Pattern Quick Reference

Reasoning Display (Chain-of-Thought)

When AI is "thinking" through a problem. See

references/reasoning-patterns.md

.

Best approach (Claude-style):

Hidden by default, expandable on demand

Structured bullets when expanded

Time counter or progress indicator

Clear "done" state

Anti-patterns:

Wall of streaming text (overwhelming)

Scrolling too fast to read

No expand option (feels opaque)

No clear end state

Progress Steps

When AI completes sequential tasks. See

references/progress-patterns.md

.

Best approach:

Show current step + total steps

Mark completed steps visually

Show what's actively happening

Allow step-level details on expand

Streaming States

When content generates token-by-token. See

references/streaming-patterns.md

.

Best approach:

Typing cursor or text animation

Smooth token appearance (not jarring)

Skeleton for expected content shape

"Stop generating" escape hatch

Status Indicators

When background work happens. See

references/status-patterns.md

.

Best approach:

Subtle but visible animation

Brief description of current action

Don't block user from other actions

Notify on completion

Implementation Checklist

When implementing any AI loading state:

Identify pattern category

from decision framework above

Choose visibility level

always visible, expandable, or minimal

Add motion

animation reduces perceived wait (but keep it subtle)

Show progress

time elapsed, steps completed, or content streamed

Signal completion

clear visual/state change when done

Provide escape

stop/cancel for long operations

Handle errors

don't leave user in permanent loading state

Test on slow connections

ensure graceful degradation Product Comparisons (Reference) Product Approach Strength Weakness Claude Hidden reasoning, expandable, structured bullets Low cognitive load Can feel opaque ChatGPT Brief labels, auto-collapse Unobtrusive Less transparent DeepSeek Full streaming reasoning Maximum transparency Overwhelming Gemini User-scrolled, numbered steps Clear structure Unclear completion Usage Read the relevant reference file for your pattern category: references/reasoning-patterns.md - Chain-of-thought, thinking indicators references/progress-patterns.md - Step sequences, task completion references/streaming-patterns.md - Token streaming, content generation references/status-patterns.md - Background processing, polling states