Plan Generation Loading UX
Design Decision
Replace raw AI text streaming with a coach-announced phase progress system during Step 8 plan generation.
Implementation
Visual Layout
┌─────────────────────────────────────────────────────┐
│ │
│ ✨ Creating Your Options... │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ [Max Avatar] "Designing your training │ │
│ │ ●●○ structure..." │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ [Nova Avatar] Waiting... │ │
│ │ ○○○ │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ [Sage Avatar] Waiting... │ │
│ │ ○○○ │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ════════════════════════════════ │
│ Step 1 of 4: Training Structure │
│ │
└─────────────────────────────────────────────────────┘
Phase Messages
| Phase | Coach | Active Message | Complete Message |
|---|---|---|---|
| 1 | Max | "Designing your training structure..." | "Push/Pull/Legs, 4x per week" |
| 2 | Nova | "Validating exercise science..." | "Progressive overload optimized" |
| 3 | Sage | "Optimizing recovery balance..." | "Deload every 4th week" |
| 4 | All | "Finalizing your plan options..." | — |
Key Elements
- Coach avatar with animation - Pulsing/glowing effect when coach is active
- Brief friendly message - Specific to each phase, not raw AI output
- Step indicator - Shows overall progress (Step 1 of 4)
- Dimmed upcoming coaches - Sets user expectations
- Completion summaries - One-line result from each coach
States
- Waiting: Dimmed card, no animation
- Active: Full opacity, pulsing avatar, current message
- Complete: Checkmark, summary message
References
- Cloudscape Design System: Use avatar component with loading state
- Nielsen Heuristics: Visibility of system status is essential
- Smashing Magazine: Use determinate progress for waits >10 seconds
- General: Add engagement elements during long waits