(SP: 2) [Frontend] Quizzes page ISR + client-side progress + GitHub stars cache (#371)

* perf(quiz-flow): move quiz progress to client-side fetch, enable ISR for quizzes page

- Move user progress fetch from SSR to client-side API (/api/quiz/progress)
- Remove force-dynamic and getCurrentUser() from quizzes page
- Add revalidate=300 for ISR caching
- Use window.history.replaceState for tab URL sync (avoid Next.js navigation)
- Add forceMount to TabsContent to prevent layout shift on tab switch
- Fix nested <main> — use <section> inside DynamicGridBackground
- Cache GitHub stars count in sessionStorage to avoid refetch + re-animation

* perf: replace useRef with useState lazy initializer in GitHubStarButton

Fixes React 19 react-hooks/refs ESLint error — useRef.current cannot
be read during render. Uses useState(getStoredStars) to capture the
sessionStorage value once on mount instead.

* fix: stop star icon trembling on hover in GitHubStarButton

Author: LesiaUKR

frontend/app/[locale]/quizzes/page.tsx

@@ -5,9 +5,7 @@ import QuizzesSection from '@/components/quiz/QuizzesSection';
 import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
 import {
   getActiveQuizzes,
-  getUserQuizzesProgress,
 } from '@/db/queries/quizzes/quiz';
-import { getCurrentUser } from '@/lib/auth';
 
 type PageProps = { params: Promise<{ locale: string }> };
 
@@ -23,22 +21,14 @@ export async function generateMetadata({
   };
 }
 
-export const dynamic = 'force-dynamic';
+export const revalidate = 300
 
 export default async function QuizzesPage({ params }: PageProps) {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'quiz.list' });
-  const session = await getCurrentUser();
 
   const quizzes = await getActiveQuizzes(locale);
 
-  let userProgressMap: Record<string, any> = {};
-
-  if (session?.id) {
-    const progressMapData = await getUserQuizzesProgress(session.id);
-    userProgressMap = Object.fromEntries(progressMapData);
-  }
-
   if (!quizzes.length) {
     return (
       <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
@@ -50,7 +40,7 @@ export default async function QuizzesPage({ params }: PageProps) {
 
   return (
     <DynamicGridBackground className="min-h-screen bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
-      <main className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <section className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="mb-8">
           <p className="text-sm font-semibold text-(--accent-primary)">
             {t('practice')}
@@ -59,8 +49,8 @@ export default async function QuizzesPage({ params }: PageProps) {
           <p className="text-gray-600 dark:text-gray-400">{t('subtitle')}</p>
         </div>
 
-        <QuizzesSection quizzes={quizzes} userProgressMap={userProgressMap} />
-      </main>
+        <QuizzesSection quizzes={quizzes} userProgressMap={{}} />
+      </section>
     </DynamicGridBackground>
   );
 }

frontend/app/api/quiz/progress/route.ts

@@ -0,0 +1,31 @@
+import { NextResponse } from 'next/server';
+
+import { getUserQuizzesProgress } from '@/db/queries/quizzes/quiz';
+import { getCurrentUser } from '@/lib/auth';
+
+export const runtime = 'nodejs';
+
+export async function GET() {
+  const user = await getCurrentUser();
+
+  if (!user?.id) {
+    return NextResponse.json({}, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  }
+
+  const rawProgress = await getUserQuizzesProgress(user.id);
+  const progressMap: Record<string, { bestScore: number; totalQuestions: number; attemptsCount: number }> = {};
+
+  for (const [quizId, progress] of rawProgress) {
+    progressMap[quizId] = {
+      bestScore: progress.bestScore,
+      totalQuestions: progress.totalQuestions,
+      attemptsCount: progress.attemptsCount,
+    };
+  }
+
+  return NextResponse.json(progressMap, {
+    headers: { 'Cache-Control': 'no-store' },
+  });
+}

frontend/components/quiz/QuizzesSection.tsx

@@ -2,6 +2,7 @@
 
 import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
 
 import { CategoryTabButton } from '@/components/shared/CategoryTabButton';
 import { Tabs, TabsContent, TabsList } from '@/components/ui/tabs';
@@ -47,16 +48,37 @@ export default function QuizzesSection({
     ? (locale as 'uk' | 'en' | 'pl')
     : 'en';
 
+  const [progressMap, setProgressMap] =
+    useState<Record<string, UserProgress>>(userProgressMap);
+    const [progressLoaded, setProgressLoaded] = useState(
+    Object.keys(userProgressMap).length > 0
+  );
+  
+   useEffect(() => {
+  fetch('/api/quiz/progress')
+    .then(res => res.ok ? res.json() : {})
+    .then(data => {
+      setProgressMap(data);
+      setProgressLoaded(true);
+    })
+    .catch(() => {
+      setProgressLoaded(true);
+    });
+  }, []);
+      
   const DEFAULT_CATEGORY = categoryData[0]?.slug || 'git';
 
   const categoryFromUrl = searchParams.get('category');
   const validCategory = categoryData.some(c => c.slug === categoryFromUrl);
-  const activeCategory = validCategory ? categoryFromUrl! : DEFAULT_CATEGORY;
+    const [activeCategory, setActiveCategory] = useState(
+    validCategory ? categoryFromUrl! : DEFAULT_CATEGORY
+  );
 
   const handleCategoryChange = (category: string) => {
+    setActiveCategory(category);
     const params = new URLSearchParams(searchParams.toString());
     params.set('category', category);
-    router.replace(`?${params.toString()}`, { scroll: false });
+    window.history.replaceState(null, '', `?${params.toString()}`);
   };
 
   return (
@@ -85,7 +107,12 @@ export default function QuizzesSection({
             quiz => quiz.categorySlug === category.slug
           );
           return (
-            <TabsContent key={category.slug} value={category.slug}>
+            <TabsContent
+            key={category.slug}
+            value={category.slug}
+            forceMount
+            className={activeCategory !== category.slug ? 'hidden' : ''}
+            >
               {categoryQuizzes.length > 0 ? (
                 <div className="max-w-5xl">
                   <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -102,7 +129,7 @@ export default function QuizzesSection({
                           categoryName: quiz.categoryName ?? category.slug,
                           categorySlug: quiz.categorySlug ?? category.slug,
                         }}
-                        userProgress={userProgressMap[quiz.id] || null}
+                        userProgress={progressLoaded ? (progressMap[quiz.id] || null) : null}
                       />
                     ))}
                   </div>

frontend/components/shared/GitHubStarButton.tsx

@@ -2,20 +2,32 @@
 
 import { Star } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
+
+const STORAGE_KEY = 'github-stars';
+
+function getStoredStars(): number | null {
+  if (typeof sessionStorage === 'undefined') return null;
+  const stored = sessionStorage.getItem(STORAGE_KEY);
+  if (!stored) return null;
+  const parsed = parseInt(stored, 10);
+  return Number.isNaN(parsed) ? null : parsed;
+}
 
 interface GitHubStarButtonProps {
   className?: string;
 }
 
 export function GitHubStarButton({ className = '' }: GitHubStarButtonProps) {
   const t = useTranslations('aria');
-  const [displayCount, setDisplayCount] = useState(0);
-  const [finalCount, setFinalCount] = useState<number | null>(null);
+  const [storedStars] = useState(getStoredStars);
+  const [displayCount, setDisplayCount] = useState(storedStars ?? 0);
+  const [finalCount, setFinalCount] = useState<number | null>(storedStars);
   const githubUrl = 'https://github.com/DevLoversTeam/devlovers.net';
-  const hasAnimated = useRef(false);
 
   useEffect(() => {
+    if (storedStars !== null) return;
+
     const fetchStars = async () => {
       try {
         const response = await fetch('/api/stats');
@@ -46,9 +58,8 @@ export function GitHubStarButton({ className = '' }: GitHubStarButtonProps) {
   }, []);
 
   useEffect(() => {
-    if (finalCount === null || hasAnimated.current) return;
+    if (finalCount === null || storedStars !== null) return;
 
-    hasAnimated.current = true;
     const duration = 2000;
     const steps = 60;
     const increment = finalCount / steps;
@@ -59,13 +70,16 @@ export function GitHubStarButton({ className = '' }: GitHubStarButtonProps) {
       if (current >= finalCount) {
         setDisplayCount(finalCount);
         clearInterval(timer);
+        try {
+          sessionStorage.setItem(STORAGE_KEY, String(finalCount));
+        } catch {}
       } else {
         setDisplayCount(Math.floor(current));
       }
     }, duration / steps);
 
     return () => clearInterval(timer);
-  }, [finalCount]);
+  }, [finalCount, storedStars]);
 
   const formatStarCount = (count: number): string => {
     return count.toLocaleString();
@@ -93,7 +107,7 @@ export function GitHubStarButton({ className = '' }: GitHubStarButtonProps) {
           {formatStarCount(displayCount)}
         </span>
         <Star
-          className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-all duration-300 group-hover:rotate-12 group-hover:text-yellow-400 group-hover:drop-shadow-[0_0_6px_rgba(250,204,21,0.5)] group-active:rotate-12 group-active:text-yellow-400 group-active:drop-shadow-[0_0_6px_rgba(250,204,21,0.5)]"
+          className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-[transform,color] duration-300 group-hover:rotate-12 group-hover:text-yellow-400 group-hover:drop-shadow-[0_0_6px_rgba(250,204,21,0.5)] group-active:rotate-12 group-active:text-yellow-400 group-active:drop-shadow-[0_0_6px_rgba(250,204,21,0.5)]"
           fill="currentColor"
           aria-hidden="true"
         />