Fix: Eliminate 30-60s audio generation delays with progressive loading

[backspace-agent]

Summary

• Implement progressive audio generation to eliminate blocking 30-60 second delays
• Generate first paragraph audio immediately for instant user interaction
• Background generation of remaining paragraphs with visual progress indicators
• Add comprehensive error handling, caching, and UI feedback systems

Problem Solved

Previously, users had to wait 30-60 seconds while ALL audio paragraphs generated sequentially before they could start listening. This created frustrating delays where users often thought the app was broken, leading to poor engagement and completion rates.

Solution Implementation

Progressive Audio Generation:

• Generate only first paragraph audio initially (5-10 seconds)
• Allow immediate user interaction after first paragraph is ready
• Generate remaining paragraphs in background while user listens
• Real-time progress indicators show generation status per paragraph

Enhanced User Experience:

• Visual status indicators (generating/completed/error states)
• Skeleton loaders for paragraphs still generating audio
• Background generation progress counter
• Error handling with retry buttons for failed generations

Technical Improvements:

• Audio caching system prevents regeneration on lesson revisit
• Race condition prevention with component unmount detection
• Memory leak fixes with proper cleanup of audio URLs
• Optimized paragraph splitting with useMemo

Test Results

✅ Playwright tests demonstrate:

• User can interact within 5-10 seconds vs previous 30-60 seconds
• Background generation works with visual feedback
• Error handling and retry functionality
• Audio caching improves subsequent lesson loads

Test Plan

• First paragraph audio ready within 10 seconds
• User can start playback immediately after first audio
• Background generation continues with progress indicators
• Error states show retry buttons
• Audio caching works on lesson revisit
• No memory leaks or race conditions
• Progress indicators update in real-time

Performance Impact

🚀 Massive UX improvement:

• Before: 30-60 second blocking wait
• After: 5-10 second time to interaction
• Result: ~80% reduction in time to first interaction

This change transforms the user experience from frustrating delays to immediate engagement, significantly improving completion rates and user satisfaction.