✨ Add enhanced loading animations for leaf questions

[oolongwater]

🎨 Overview

This PR enhances the loading animations for leaf questions with beautiful, multi-layer spinner effects and animated backgrounds.

✨ What's New

Enhanced Loading States

1. Loading State (Yellow/Amber) - When generating questions at leaf nodes

   • Multi-layer counter-rotating spinners
   • Animated background orbs with pulsing effects
   • Gradient center dot with shadow
   • Bouncing progress dots

2. Evaluating State (Purple/Fuchsia) - When checking user answers

   • Purple and fuchsia gradient animations
   • Same beautiful multi-layer spinner design
   • "Evaluating Answer" messaging with progress indicators

3. Generating Follow-up State (Blue/Cyan) - When creating new follow-up lessons

   • Larger, more prominent spinner (28px vs 24px)
   • Blue and cyan gradient effects
   • Enhanced text with gradient color animation
   • Detailed messaging for better UX

🎯 Key Improvements

• Visual Consistency: All three states follow the same design pattern with different color schemes
• Better UX: Clear messaging and visual feedback for each loading state
• Modern Design: Gradient effects, shadows, and smooth animations
• Proper Layering: z-index management for clean visual hierarchy
• Responsive Layout: Works seamlessly within the overlay component

📝 Technical Details

• Enhanced spinner with 3 layers (outer ring, middle counter-rotating ring, inner glow)
• Animated background orbs using blur and pulse effects
• Gradient text effects for modern look
• Staggered animation delays for bouncing dots
• All animations use Tailwind's built-in utilities

🧪 Testing

Tested across all three loading scenarios:

• ✅ Question generation at leaf nodes
• ✅ Answer evaluation
• ✅ Follow-up video generation

📸 Preview

The animations feature:

• Smooth transitions between states
• Consistent color schemes matching the action type
• Non-intrusive but informative visual feedback

---

Created with 💅 and lots of attention to detail!