// 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 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.
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.
