Design AI loading, thinking, and progress indicator UX. Use when explicitly asked to improve AI waiting states, add thinking indicators, or design loading UX for AI interfaces. Covers reasoning display (chain-of-thought), progress steps, streaming states, and the "elevator mirror effect" for reducing perceived wait time.
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: