(SP: 1) [Frontend] Fix quiz timer flash and card layout shift on quizzes page

[LesiaUKR]

Summary

• Timer flash fix: Removed Suspense boundary (loading.tsx) that unmounted QuizContainer during locale navigation. Synchronous session restore via useReducer lazy initializer and correct timer initialization via useState lazy initializer prevent any visible state reset on language switch.
• Quiz card layout shift fix: Replaced client-side progress rendering (which caused cards to jump when /api/quiz/progress resolved) with skeleton card grid that holds layout until all progress data is loaded, then renders all cards simultaneously.

Test plan

• Switch language mid-quiz — timer continues without flash or reset
• Open /quizzes page logged in — skeleton cards appear briefly, then real cards with progress render all at once (no jumping)
• Open /quizzes page as guest — skeleton cards appear, then real cards without progress (no layout shift)
• Verify progress badges (mastered/needs review/study) still display correctly after load
• Check dark mode for both skeleton and loaded states

Summary by CodeRabbit

• Bug Fixes

  • Improved countdown timer accuracy by recalculating remaining time on mount
  • Enhanced timer synchronization when browser tab regains focus
  • Fixed quiz progress display during session restoration

• New Features

  • Quiz sessions now automatically restore after page refresh or navigation
  • Added skeleton loading placeholders while quiz progress loads

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
devlovers-net	Ignored		Feb 26, 2026 4:45pm

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR refactors the quiz session restoration flow by moving restoration logic from a callback-based approach to a reducer initializer pattern in QuizContainer. It updates CountdownTimer to handle visibility changes better, adds skeleton placeholders while loading quiz progress in QuizzesSection, and removes an unused loading component.

Changes

Cohort / File(s)	Summary
Session Restoration Refactor frontend/components/quiz/QuizContainer.tsx, frontend/hooks/useQuizSession.ts	Moved session restoration logic from callback-based onRestore to lazy reducer initializer; added storage key checks and QuizSession hydration in QuizContainer initializer; removed onRestore callback from useQuizSession public API and simplified recovery flow.
UI Loading States frontend/components/quiz/QuizzesSection.tsx	Conditionally render skeleton placeholder cards when progressLoaded is false; switch to actual QuizCard components with progress data when progressLoaded is true.
Timer Synchronization frontend/components/quiz/CountdownTimer.tsx	Recalculate remaining seconds on mount using endTime; refactor interval logic with explicit intervalId; add visibilitychange listener to resync timer when document becomes visible; update cleanup accordingly.
Removed Component frontend/app/[locale]/quiz/[slug]/loading.tsx	Deleted the unused QuizLoading default export component and its Loader rendering logic.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• (SP: 1) [Frontend] Align quiz result messages with status badges, fix locale switch on result page #325: Modifies quiz session restoration logic in QuizContainer and useQuizSession with overlapping changes to restore flow patterns.
• (SP: 2) [Frontend] Quizzes page ISR + client-side progress + GitHub stars cache #371: Updates QuizzesSection progress rendering logic with skeleton placeholders and progressMap data switching.
• (SP: 1) [Frontend] Improve Lighthouse Performance and SEO scores for quiz pages #272: Refactors CountdownTimer sync and visibility handling logic with similar timer adjustment concerns.

Suggested reviewers

• AM1007
• ViktorSvertoka

Poem

🐰 The quiz now remembers its way,
Through storage keys and initializer play,
Skeletons dance while progress loads with grace,
The timer syncs when tabs regain their place!
No more callbacks—just pure reducer state,
The quiz flow hops forward, oh how it's great! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the two main fixes: removing the Suspense boundary (quiz timer flash) and adding skeleton cards (card layout shift), which align with the changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch sl/feat/quiz

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/components/quiz/QuizContainer.tsx (1)

619-619: ⚠️ Potential issue | 🟡 Minor

Consider defensive check for startedAt to handle potentially malformed restored sessions.

The non-null assertion state.startedAt! assumes startedAt is always set when status is 'in_progress'. While this should be true for well-formed sessions, a corrupted or manually-modified localStorage entry could have in_progress status with startedAt: null, causing CountdownTimer to receive an invalid endTime.

🛡️ Optional defensive approach

Add a guard in the lazy initializer to reject sessions with invalid state combinations:

     const saved = loadQuizSession(id);
     if (!saved) return defaultState;
+    
+    // Reject malformed sessions
+    if (saved.status === 'in_progress' && !saved.startedAt) {
+      return defaultState;
+    }

     return {

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/components/quiz/QuizContainer.tsx` at line 619, Add a defensive
guard to avoid passing null/undefined to CountdownTimer: when restoring session
state in QuizContainer (the lazy initializer that sets state.status and
state.startedAt), check that for status === 'in_progress' the state.startedAt is
a valid timestamp (e.g., non-null/finite Date or number); if it is
missing/invalid, treat the session as expired/failed or reset status to a safe
value (e.g., 'not_started' or compute a fallback startedAt) before rendering,
and update the place where startedAt is consumed (startedAt and CountdownTimer)
to use this validated value instead of directly using state.startedAt!. Ensure
the check is implemented near the session-restore code and anywhere state.status
=== 'in_progress' is assumed.

🧹 Nitpick comments (2)

frontend/components/quiz/QuizContainer.tsx (1)

434-436: Wrap handleTimeUp in useCallback to prevent unnecessary timer effect re-runs.

handleTimeUp is passed to CountdownTimer and included in its effect's dependency array. Since this function is recreated on every render, it causes the timer's interval effect to clear and restart on every QuizContainer state change. This could cause brief gaps in timer updates and unnecessary re-renders.

♻️ Suggested fix using useCallback

First, add useCallback to the imports on line 6:

 import {
+  useCallback,
   useEffect,
   useReducer,
   useState,
   useTransition,
 } from 'react';

Then wrap the handler:

-  const handleTimeUp = () => {
-    handleSubmit();
-  };
+  const handleTimeUp = useCallback(() => {
+    handleSubmit();
+  }, []);

Note: Since handleSubmit is also not memoized, you may need to either memoize it as well or inline the submit logic. Alternatively, use a ref pattern to avoid the dependency.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/components/quiz/QuizContainer.tsx` around lines 434 - 436, The
handler handleTimeUp is recreated on every render causing CountdownTimer's
effect to restart; wrap handleTimeUp with React's useCallback and add
useCallback to imports, e.g. memoize handleTimeUp as useCallback(() =>
handleSubmit(), [handleSubmit]); if handleSubmit is unstable either memoize
handleSubmit too or replace the call with inlined submit logic or use a ref to
the latest submit function so handleTimeUp's dependency array can remain stable.

frontend/components/quiz/QuizzesSection.tsx (1)

57-67: Consider adding abort controller to prevent state updates on unmounted component.

The fetch doesn't include an abort signal. If the component unmounts before the fetch completes, setProgressMap and setProgressLoaded will be called on an unmounted component. While React 18+ handles this more gracefully, adding an abort controller is a cleaner approach.

♻️ Suggested improvement with AbortController

  useEffect(() => {
+   const controller = new AbortController();
-   fetch('/api/quiz/progress')
+   fetch('/api/quiz/progress', { signal: controller.signal })
      .then(res => res.ok ? res.json() : {})
      .then(data => {
        setProgressMap(data);
        setProgressLoaded(true);
      })
      .catch(() => {
-       setProgressLoaded(true);
+       if (!controller.signal.aborted) {
+         setProgressLoaded(true);
+       }
      });
+   return () => controller.abort();
  }, []);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/components/quiz/QuizzesSection.tsx` around lines 57 - 67, The effect
in useEffect that calls fetch('/api/quiz/progress') should use an
AbortController to avoid calling setProgressMap and setProgressLoaded after the
component unmounts: create an AbortController, pass controller.signal into
fetch, and in the cleanup return () => controller.abort(); update the .catch to
ignore AbortError (or check controller.signal.aborted) so you don't call
setProgressMap/setProgressLoaded when aborted; reference the existing useEffect,
fetch('/api/quiz/progress'), setProgressMap and setProgressLoaded when making
the change.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@frontend/components/quiz/QuizContainer.tsx`:
- Line 619: Add a defensive guard to avoid passing null/undefined to
CountdownTimer: when restoring session state in QuizContainer (the lazy
initializer that sets state.status and state.startedAt), check that for status
=== 'in_progress' the state.startedAt is a valid timestamp (e.g.,
non-null/finite Date or number); if it is missing/invalid, treat the session as
expired/failed or reset status to a safe value (e.g., 'not_started' or compute a
fallback startedAt) before rendering, and update the place where startedAt is
consumed (startedAt and CountdownTimer) to use this validated value instead of
directly using state.startedAt!. Ensure the check is implemented near the
session-restore code and anywhere state.status === 'in_progress' is assumed.

---

Nitpick comments:
In `@frontend/components/quiz/QuizContainer.tsx`:
- Around line 434-436: The handler handleTimeUp is recreated on every render
causing CountdownTimer's effect to restart; wrap handleTimeUp with React's
useCallback and add useCallback to imports, e.g. memoize handleTimeUp as
useCallback(() => handleSubmit(), [handleSubmit]); if handleSubmit is unstable
either memoize handleSubmit too or replace the call with inlined submit logic or
use a ref to the latest submit function so handleTimeUp's dependency array can
remain stable.

In `@frontend/components/quiz/QuizzesSection.tsx`:
- Around line 57-67: The effect in useEffect that calls
fetch('/api/quiz/progress') should use an AbortController to avoid calling
setProgressMap and setProgressLoaded after the component unmounts: create an
AbortController, pass controller.signal into fetch, and in the cleanup return ()
=> controller.abort(); update the .catch to ignore AbortError (or check
controller.signal.aborted) so you don't call setProgressMap/setProgressLoaded
when aborted; reference the existing useEffect, fetch('/api/quiz/progress'),
setProgressMap and setProgressLoaded when making the change.

---

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3a59b4e and fa1cb63.

📒 Files selected for processing (5)

• frontend/app/[locale]/quiz/[slug]/loading.tsx
• frontend/components/quiz/CountdownTimer.tsx
• frontend/components/quiz/QuizContainer.tsx
• frontend/components/quiz/QuizzesSection.tsx
• frontend/hooks/useQuizSession.ts

💤 Files with no reviewable changes (1)

• frontend/app/[locale]/quiz/[slug]/loading.tsx