AI Loading UX

Decision Framework

Core Principles

1. The Elevator Mirror Effect

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

4. Signal Completion Clearly

Pattern Quick Reference

Reasoning Display (Chain-of-Thought)

• Hidden by default, expandable on demand
• Structured bullets when expanded
• Time counter or progress indicator
• Clear "done" state

• Wall of streaming text (overwhelming)
• Scrolling too fast to read
• No expand option (feels opaque)
• No clear end state

Progress Steps

• Show current step + total steps
• Mark completed steps visually
• Show what's actively happening
• Allow step-level details on expand

Streaming States

• Typing cursor or text animation
• Smooth token appearance (not jarring)
• Skeleton for expected content shape
• "Stop generating" escape hatch

Status Indicators

• Subtle but visible animation
• Brief description of current action
• Don't block user from other actions
• Notify on completion

Implementation Checklist

1. Identify pattern category from decision framework above
2. Choose visibility level: always visible, expandable, or minimal
3. Add motion: animation reduces perceived wait (but keep it subtle)
4. Show progress: time elapsed, steps completed, or content streamed
5. Signal completion: clear visual/state change when done
6. Provide escape: stop/cancel for long operations
7. Handle errors: don't leave user in permanent loading state
8. Test on slow connections: ensure graceful degradation

Product Comparisons (Reference)

Usage

• 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