Race Condition → Creative UX Solution

// The fundamental React rendering race condition
const handleCardResult = async (isCorrect, timeSeconds) => {
  await recordCardResult(isCorrect, timeSeconds); 
  // Context updates currentIndex → triggers re-render
  // New card props flow down to StudyCard
  // Brief microsecond window where:
  // 1. New card content loads
  // 2. isFlipped state resets  
  // 3. User sees back of new card before flip animation
};

// Timeline of problematic sequence:
// T0: User clicks "Got it Right"
// T1: handleCardResult() called
// T2: recordCardResult() updates Context state
// T3: StudyCard re-renders with new flashcard
// T4: ← RACE CONDITION WINDOW ← User sees answer briefly
// T5: useEffect fires, sets isFlipped to false
// T6: Flip animation begins