04 - Loading Transition

Overview

Handle the transition from picking/revealing cards to the "loading" state while the backend generates the reading interpretation.

Design Constraints (From Master Design Guide)

• Intentional Friction: The loading state is a "grounding" moment.
• Atmospheric Hues: Use organic, aurora-like gradients and smoke patterns for backgrounds to evoke a sense of flow and mystery.
• OLED Noir: Background: #000000.
• Ritual Pacing: Everything must be continuous and fluid.

React Native / Expo Implementation

1. Choreography: Once all cards are flipped, trigger API call to /api/v1/readings.
2. Animation Sequence: spin -> linger -> fading -> drift.
3. Visuals:
   • Continuous CCW rotation on the container (withRepeat).
   • Animate scale down to zoom out.
   • SVG concentric rings (inner dotted, middle solid, outer dashed) rotating at different speeds.
   • Glowing RadialGradient orb in the center.

AI Developer Prompt

"Implement the 'Ritual Loading' sequence using react-native-reanimated and react-native-svg. The entire container must shrink and begin a continuous CCW rotation. Fade in SVG concentric rings in the center, colored in ethereal Lavender and Sage Green. Animate the rings rotating at different speeds while the API request is pending. Use a background of #000000 with an atmospheric 'smoke' gradient layer. Display loading text with a 3-dot animation (opacity pulse)."