fix: unify entry animations and eliminate layout flicker on overview, syllabus tracker, and doubt forum

src/app/dashboard/community/page.tsx

@@ -84,38 +84,45 @@ export default function CommunityPage() {
     return true
   })
 
-  if (loading) {
-    return (
-      <div className="h-[70vh] flex flex-col items-center justify-center p-8">
-        <div className="h-8 w-8 border-4 border-[var(--cyan-ai)] border-t-transparent rounded-full animate-spin mb-4"></div>
-        <p className="text-muted-foreground font-medium animate-pulse">Loading Doubt Forum...</p>
-      </div>
-    )
-  }
 
-  if (!hasAccessTo("doubt-resolution-community")) {
+
+  if (!hasAccessTo("doubt-resolution-community") && !isDemo) {
     return (
-      <div className="p-8 h-full flex flex-col items-center justify-center text-center max-w-2xl mx-auto">
-        <div className="size-20 rounded-full bg-red-500/10 flex items-center justify-center mx-auto text-red-500 mb-6">
+      <div className="p-8 space-y-8 max-w-7xl mx-auto">
+        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
+          <div>
+            <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
+              <span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[var(--cyan-ai-10)] border border-yellow-300/60 dark:border-[var(--cyan-ai-20)]">
+                <MessageSquare className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
+              </span>
+              Doubt Forum
+            </h1>
+            <p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
+              Ask questions, share knowledge, and learn together with the community.
+            </p>
+          </div>
+        </div>
+        <div className="p-12 text-center max-w-2xl mx-auto bg-secondary/20 border border-border rounded-3xl space-y-6 animate-section animate-section-2">
+          <div className="size-20 rounded-full bg-red-500/10 flex items-center justify-center mx-auto text-red-500">
             <Lock size={40} />
           </div>
-        <h2 className="text-3xl font-bold mb-4">Premium Feature</h2>
-        <p className="text-muted-foreground text-lg mb-8">
+          <h2 className="text-2xl font-bold">Premium Feature</h2>
+          <p className="text-muted-foreground">
             The Doubt Forum is a premium feature. Upgrade your plan to ask doubts and interact with tutors and the community.
           </p>
           <button 
-          className="px-8 py-3 bg-primary text-primary-foreground font-bold rounded-xl shadow-[0_0_20px_-5px_var(--color-primary)] text-lg"
+            className="px-8 py-3 bg-[var(--cyan-ai)] text-black font-bold rounded-xl shadow-[0_0_20px_-5px_var(--cyan-ai)]"
             onClick={() => window.location.href = '/upgrade'}
           >
             Upgrade Plan
           </button>
         </div>
+      </div>
     )
   }
 
   return (
-    <PremiumGate featureKey="doubt-resolution-community">
-      <div className="p-8 space-y-6 max-w-7xl mx-auto">
+    <div className="p-8 space-y-8 max-w-7xl mx-auto">
       <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 animate-section animate-section-1">
         <div>
           <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
@@ -159,7 +166,9 @@ export default function CommunityPage() {
       </div>
 
       <div className="space-y-4 animate-section animate-section-3">
-        {filteredDoubts.map((doubt) => (
+        {loading ? (
+          <div className="text-center py-12 text-muted-foreground animate-pulse">Loading doubts...</div>
+        ) : (<>{filteredDoubts.map((doubt) => (
           <Card key={doubt.id} className="border-border shadow-sm hover:border-[var(--cyan-ai-10)] transition-colors cursor-pointer">
             <CardContent className="p-0 flex">
               {/* Upvote Sidebar */}
@@ -259,6 +268,7 @@ export default function CommunityPage() {
             </p>
           </div>
         )}
+        </>)}
       </div>
       {/* Ask Doubt Modal */}
       {isAskModalOpen && (
@@ -331,7 +341,7 @@ export default function CommunityPage() {
         </div>
       )}
     </div>
-    </PremiumGate>
+
   )
 }
 

src/app/dashboard/page.tsx

@@ -9,11 +9,33 @@ import { Button } from "@/components/ui/button"
 import { BrainCircuit, Play, ChevronRight, Activity, Target, CheckCircle2, AlertTriangle, TrendingUp, Calendar, Zap, LayoutDashboard, Share2, Trophy, Lock, ArrowRight, Clock, Download } from "lucide-react"
 import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
 import { AdaptiveStudyPlan } from "@/components/AI/AdaptiveStudyPlan"
-import { useActiveUser } from "@/hooks/useActiveUser"
+import { useActiveUser, isDemoUser, DEFAULT_USER_ID } from "@/hooks/useActiveUser"
 
 export default function DashboardPage() {
   const { user, userId, loading: userLoading, hasAccessTo, trialInfo } = useActiveUser()
-  const [userStats, setUserStats] = useState<any>(null)
+  const [userStats, setUserStats] = useState<any>(() => {
+    const currentId = (typeof window !== "undefined" ? localStorage.getItem("activeUserId") : null) || DEFAULT_USER_ID;
+    if (isDemoUser(currentId)) {
+      return {
+        today_score: 42,
+        today_max_score: 60,
+        overall_accuracy: 82.0,
+        total_questions_attempted: 1245,
+        city_rank: 42,
+        city_total: 1200,
+        is_new_user: false,
+      };
+    }
+    return {
+      today_score: 0,
+      today_max_score: 0,
+      overall_accuracy: 0,
+      total_questions_attempted: 0,
+      city_rank: null,
+      city_total: null,
+      is_new_user: true,
+    };
+  })
   const [loading, setLoading] = useState(true)
   const [dpps, setDpps] = useState<any[]>([])
   const [cbts, setCbts] = useState<any[]>([])
@@ -22,8 +44,7 @@ export default function DashboardPage() {
   const progressRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    if (userLoading) return
-    const currentUserId = user?.id || userId
+    const currentUserId = user?.id || userId || (typeof window !== "undefined" ? localStorage.getItem("activeUserId") : null) || DEFAULT_USER_ID;
     if (!currentUserId) {
       setLoading(false)
       return
@@ -48,7 +69,7 @@ export default function DashboardPage() {
       }
     }
     fetchStatsAndTests()
-  }, [userLoading, user?.id, userId])
+  }, [user?.id, userId, user?.target_exam])
 
   const getShareUrl = () => {
     const score = isNew ? "0 / 0" : `${userStats?.today_score || 0} / ${userStats?.today_max_score || 60}`
@@ -108,24 +129,15 @@ export default function DashboardPage() {
     setShareMenuOpen(false)
   }
 
-  if (loading) {
-    return (
-      <div className="h-[70vh] flex flex-col items-center justify-center p-8">
-        <div className="h-8 w-8 border-4 border-[var(--cyan-ai)] border-t-transparent rounded-full animate-spin mb-4"></div>
-        <p className="text-muted-foreground font-medium animate-pulse">Loading dashboard...</p>
-      </div>
-    )
-  }
 
   const isNew = userStats ? userStats.is_new_user : true
   const isNeet = user?.target_exam === "NEET"
 
   return (
-    <div className="p-8 max-w-7xl mx-auto space-y-10">
+    <div className="p-8 max-w-7xl mx-auto space-y-8">
 
-      {/* Basic Performance Dashboard (F-05) */}
-      <section className="animate-section animate-section-1">
-        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
+      {/* Page Header */}
+      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
         <div>
           <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
             <span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[var(--cyan-ai-10)] border border-yellow-300/60 dark:border-[var(--cyan-ai-20)]">
@@ -160,9 +172,11 @@ export default function DashboardPage() {
           )}
         </div>
       </div>
-        <div ref={progressRef} className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 -mx-4 bg-background rounded-2xl">
+
+      {/* KPI Stat Cards */}
+      <div ref={progressRef} className="grid grid-cols-2 md:grid-cols-4 gap-4 animate-section animate-section-2">
         {/* Today's Score */}
-          <Card>
+        <Card className="border-border shadow-sm">
           <CardContent className="p-5 flex flex-col items-center text-center">
             <div className="p-3 bg-secondary rounded-full mb-3 text-primary"><Target size={24} /></div>
             <p className="text-sm font-bold text-muted-foreground uppercase tracking-wider mb-1">Today's Score</p>
@@ -176,7 +190,7 @@ export default function DashboardPage() {
         </Card>
 
         {/* Overall Accuracy */}
-          <Card>
+        <Card className="border-border shadow-sm">
           <CardContent className="p-5 flex flex-col items-center text-center">
             <div className="p-3 bg-secondary rounded-full mb-3 text-amber-500"><Activity size={24} /></div>
             <p className="text-sm font-bold text-muted-foreground uppercase tracking-wider mb-1">Overall Accuracy</p>
@@ -190,7 +204,7 @@ export default function DashboardPage() {
         </Card>
 
         {/* Qs Attempted */}
-          <Card>
+        <Card className="border-border shadow-sm">
           <CardContent className="p-5 flex flex-col items-center text-center">
             <div className="p-3 bg-secondary rounded-full mb-3 text-[var(--cyan-ai)]"><CheckCircle2 size={24} /></div>
             <p className="text-sm font-bold text-muted-foreground uppercase tracking-wider mb-1">Qs Attempted</p>
@@ -204,7 +218,7 @@ export default function DashboardPage() {
         </Card>
 
         {/* City Rank */}
-          <Card className="relative overflow-hidden group">
+        <Card className="border-border shadow-sm relative overflow-hidden group">
           <div className="absolute inset-0 bg-gradient-to-br from-background to-secondary/50 z-0"></div>
           <CardContent className="p-5 flex flex-col items-center text-center relative z-10">
             <div className="p-3 bg-background border border-border shadow-sm rounded-full mb-3 text-foreground group-hover:scale-110 transition-transform"><Trophy size={24} /></div>
@@ -224,16 +238,18 @@ export default function DashboardPage() {
           </CardContent>
         </Card>
       </div>
-      </section>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+      {/* Tests & DPPs Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 animate-section animate-section-3">
         {/* Dynamic DPP Modules */}
-        <section className="animate-section animate-section-2">
+        <section>
           <div className="flex items-center justify-between mb-5">
             <h2 className="text-xl font-semibold tracking-tight flex items-center gap-2">
               Today's DPPs
             </h2>
+            <Link href="/dashboard/dpp">
               <Button variant="ghost" size="sm" className="text-muted-foreground font-medium">View All</Button>
+            </Link>
           </div>
           <div className="space-y-4">
             {dpps.length > 0 ? (
@@ -257,18 +273,40 @@ export default function DashboardPage() {
                   </CardContent>
                 </Card>
               ))
+            ) : loading ? (
+              <div className="space-y-4">
+                {[1, 2].map((i) => (
+                  <Card key={i} className="animate-pulse">
+                    <CardContent className="p-5 flex items-center justify-between">
+                      <div className="flex gap-4 items-center">
+                        <div className="size-11 bg-secondary rounded-xl"></div>
+                        <div className="space-y-2">
+                          <div className="h-4 w-40 bg-secondary rounded"></div>
+                          <div className="h-3 w-28 bg-secondary/60 rounded"></div>
+                        </div>
+                      </div>
+                      <div className="h-8 w-16 bg-secondary rounded-xl"></div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
             ) : (
-              <p className="text-muted-foreground text-sm py-4">No DPPs scheduled for today.</p>
+              <Card className="overflow-hidden p-6 border-dashed opacity-70">
+                <p className="text-muted-foreground text-sm">No DPPs scheduled for today.</p>
+              </Card>
             )}
           </div>
         </section>
 
         {/* Upcoming CBTs */}
-        <section className="animate-section animate-section-3">
+        <section>
           <div className="flex items-center justify-between mb-5">
             <h2 className="text-xl font-semibold tracking-tight flex items-center gap-2">
               Upcoming CBTs
             </h2>
+            <Link href="/dashboard/cbt">
+              <Button variant="ghost" size="sm" className="text-muted-foreground font-medium">View All</Button>
+            </Link>
           </div>
           <div className="space-y-4">
             {cbts.length > 0 ? (
@@ -291,6 +329,14 @@ export default function DashboardPage() {
                   </div>
                 </Card>
               ))
+            ) : loading ? (
+              <div className="space-y-4">
+                <Card className="animate-pulse p-6 space-y-3">
+                  <div className="h-4 w-24 bg-secondary rounded"></div>
+                  <div className="h-5 w-48 bg-secondary rounded"></div>
+                  <div className="h-3 w-32 bg-secondary/60 rounded"></div>
+                </Card>
+              </div>
             ) : (
               <Card className="overflow-hidden p-6 border-dashed opacity-70">
                 <p className="text-muted-foreground text-sm">No upcoming CBTs at the moment.</p>
@@ -300,13 +346,14 @@ export default function DashboardPage() {
         </section>
       </div>
       
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-        <section className="animate-section animate-section-4">
+      {/* AI Intelligence Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 animate-section animate-section-4">
+        <div>
           <AdaptiveStudyPlan />
-        </section>
-        <section className="animate-section animate-section-5">
+        </div>
+        <div>
           <MistakeHeatmap />
-        </section>
+        </div>
       </div>
 
     </div>

src/app/dashboard/progress/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react"
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
-import { ChevronDown, ChevronRight, CheckCircle2, Circle, Clock, Activity, BarChart3 } from "lucide-react"
+import { ChevronDown, ChevronRight, CheckCircle2, Circle, Clock, Activity, BarChart3, Lock } from "lucide-react"
 import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
 import { PremiumGate } from "@/components/PremiumGate"
 
@@ -134,15 +134,6 @@ const ZERO_SUBJECTS: Subject[] = [
   // Math/Bio dynamic subjects handled below
 ]
 
-export default function ProgressTrackerPage() {
-  const { userId, user } = useActiveUser()
-  const isDemo = isDemoUser(userId)
-  const [subjects, setSubjects] = useState<Subject[]>([])
-
-  useEffect(() => {
-    const targetExam = user?.target_exam || "JEE_Main";
-    const isNeet = targetExam === "NEET";
-    const isJeeNeet = targetExam === "JEE_NEET";
 
 const mathDemoSubject: Subject = {
       name: "Mathematics",
@@ -238,20 +229,66 @@ export default function ProgressTrackerPage() {
       ]
     };
 
-    const base = isDemo ? [...DEMO_SUBJECTS] : [...ZERO_SUBJECTS];
-    
+function getInitialSubjects(isDemoUser: boolean, targetExam: string): Subject[] {
+  const isNeet = targetExam === "NEET";
+  const isJeeNeet = targetExam === "JEE_NEET";
+  const base = isDemoUser ? [...DEMO_SUBJECTS] : [...ZERO_SUBJECTS];
   if (isJeeNeet) {
-      // 4 Subjects for JEE + NEET: Physics, Chemistry, Mathematics, Biology
-      base.push(isDemo ? mathDemoSubject : mathZeroSubject);
-      base.push(isDemo ? bioDemoSubject : bioZeroSubject);
+    base.push(isDemoUser ? mathDemoSubject : mathZeroSubject);
+    base.push(isDemoUser ? bioDemoSubject : bioZeroSubject);
   } else if (isNeet) {
-      base.push(isDemo ? bioDemoSubject : bioZeroSubject);
+    base.push(isDemoUser ? bioDemoSubject : bioZeroSubject);
   } else {
-      base.push(isDemo ? mathDemoSubject : mathZeroSubject);
+    base.push(isDemoUser ? mathDemoSubject : mathZeroSubject);
+  }
+  return base;
+}
+export default function ProgressTrackerPage() {
+  const { userId, user, hasAccessTo } = useActiveUser();
+  const isDemo = isDemoUser(userId);
+  const [subjects, setSubjects] = useState<Subject[]>(() =>
+    getInitialSubjects(isDemoUser(userId), user?.target_exam || "JEE_Main")
+  );
+
+  useEffect(() => {
+    setSubjects(getInitialSubjects(isDemo, user?.target_exam || "JEE_Main"));
+  }, [isDemo, user?.target_exam]);
+
+  if (!hasAccessTo("chapter-wise-progress-tracking") && !isDemo) {
+    return (
+      <div className="p-8 space-y-8 max-w-7xl mx-auto">
+        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
+          <div>
+            <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
+              <span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[var(--cyan-ai-10)] border border-yellow-300/60 dark:border-[var(--cyan-ai-20)]">
+                <BarChart3 className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
+              </span>
+              Syllabus Tracker
+            </h1>
+            <p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
+              Track your syllabus coverage and mastery per chapter to ensure no gaps.
+            </p>
+          </div>
+        </div>
+        <div className="p-12 text-center max-w-2xl mx-auto bg-secondary/20 border border-border rounded-3xl space-y-6 animate-section animate-section-2">
+          <div className="size-20 rounded-full bg-red-500/10 flex items-center justify-center mx-auto text-red-500">
+            <Lock size={40} />
+          </div>
+          <h2 className="text-2xl font-bold">Premium Feature</h2>
+          <p className="text-muted-foreground">
+            Chapter-wise syllabus tracking is available on Pro and AI Coach plans.
+          </p>
+          <button 
+            className="px-8 py-3 bg-[var(--cyan-ai)] text-black font-bold rounded-xl shadow-[0_0_20px_-5px_var(--cyan-ai)]"
+            onClick={() => window.location.href = '/upgrade'}
+          >
+            Upgrade Plan
+          </button>
+        </div>
+      </div>
+    );
   }
 
-    setSubjects(base);
-  }, [isDemo, user?.target_exam]);
 
   const toggleChapter = (subjectIndex: number, chapterIndex: number) => {
     const newSubjects = [...subjects]
@@ -260,7 +297,7 @@ export default function ProgressTrackerPage() {
   }
 
   return (
-    <PremiumGate featureKey="chapter-wise-progress-tracking">
+    
       <div className="p-8 space-y-8 max-w-7xl mx-auto">
         <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
           <div>
@@ -351,6 +388,6 @@ export default function ProgressTrackerPage() {
         ))}
       </div>
     </div>
-    </PremiumGate>
+
   )
 }

src/components/AI/AdaptiveStudyPlan.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { useState, useEffect } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -32,14 +32,10 @@ const NEW_USER_PLAN: PlanItem[] = [
 export function AdaptiveStudyPlan() {
   const { user } = useActiveUser();
   const isDemo = isDemoUser(user?.id);
-  const [items, setItems] = useState<PlanItem[]>(DEMO_PLAN);
+  const [items, setItems] = useState<PlanItem[]>(() => isDemo ? DEMO_PLAN : NEW_USER_PLAN);
 
   useEffect(() => {
-    if (isDemo) {
-      setItems(DEMO_PLAN);
-    } else {
-      setItems(NEW_USER_PLAN);
-    }
+    setItems(isDemo ? DEMO_PLAN : NEW_USER_PLAN);
   }, [isDemo]);
 
   const updateStatus = (id: string, newStatus: PlanState) => {

src/components/AI/MistakeHeatmap.tsx

@@ -20,8 +20,8 @@ const ZERO_HEATMAP_DATA = [
 ];
 
 export function MistakeHeatmap() {
-  const { userId } = useActiveUser();
-  const isDemo = isDemoUser(userId);
+  const { userId, user } = useActiveUser();
+  const isDemo = isDemoUser(user?.id || userId);
 
   const getColor = (errorRate: number) => {
     if (errorRate === 0) return 'bg-green-600/50 border-green-600/80 text-green-100';

src/components/PremiumGate.tsx

@@ -13,14 +13,10 @@ interface PremiumGateProps {
 export function PremiumGate({ featureKey, children }: PremiumGateProps) {
   const { hasAccessTo, loading, user } = useActiveUser();
 
+  // Allow children to render immediately without a blocking center spinner
+  // so that page entry animations (animate-section) execute smoothly on route transition.
   if (loading || !user) {
-    return (
-      <div className="flex-1 min-h-[400px] flex items-center justify-center">
-        <div className="flex flex-col items-center gap-4">
-          <div className="w-10 h-10 border-4 border-[var(--cyan-ai-20)] border-t-[var(--cyan-ai)] rounded-full animate-spin"></div>
-        </div>
-      </div>
-    );
+    return <>{children}</>;
   }
 
   if (!hasAccessTo(featureKey)) {

src/hooks/useActiveUser.ts

@@ -147,6 +147,88 @@ async function fetchSettings(): Promise<any> {
   return cachedSettings ?? null;
 }
 
+let cachedUserProfile: UserProfile | null = null;
+
+export function getKnownDemoProfile(id: string): UserProfile | null {
+  if (id === DEMO_USERS.AICOACH_JEE.id) {
+    return {
+      id: DEMO_USERS.AICOACH_JEE.id,
+      name: "Aarav",
+      email: "aarav.jee@pragativeer.com",
+      phone: "9999999991",
+      class: "12th",
+      target_exam: "JEE_Main",
+      medium: "English",
+      school: "Delhi Public School",
+      city: "New Delhi",
+      state: "Delhi",
+      tier: "AI Coach",
+      streak_count: 14,
+      longest_streak: 21,
+      created_at: new Date(Date.now() - 30 * 86400000).toISOString(),
+      trial_end: new Date(Date.now() + 60 * 86400000).toISOString(),
+    };
+  }
+  if (id === DEMO_USERS.AICOACH_NEET.id) {
+    return {
+      id: DEMO_USERS.AICOACH_NEET.id,
+      name: "Neha Verma",
+      email: "neha.neet@pragativeer.com",
+      phone: "9999999992",
+      class: "12th",
+      target_exam: "NEET",
+      medium: "English",
+      school: "Kendriya Vidyalaya",
+      city: "Kota",
+      state: "Rajasthan",
+      tier: "AI Coach",
+      streak_count: 18,
+      longest_streak: 25,
+      created_at: new Date(Date.now() - 30 * 86400000).toISOString(),
+      trial_end: new Date(Date.now() + 60 * 86400000).toISOString(),
+    };
+  }
+  if (id === DEMO_USERS.AICOACH_JEE_NEET.id) {
+    return {
+      id: DEMO_USERS.AICOACH_JEE_NEET.id,
+      name: "Rahul Verma",
+      email: "rahul.jeeneet@pragativeer.com",
+      phone: "9999999993",
+      class: "12th",
+      target_exam: "JEE_NEET",
+      medium: "English",
+      school: "Modern School",
+      city: "Mumbai",
+      state: "Maharashtra",
+      tier: "AI Coach",
+      streak_count: 12,
+      longest_streak: 15,
+      created_at: new Date(Date.now() - 30 * 86400000).toISOString(),
+      trial_end: new Date(Date.now() + 60 * 86400000).toISOString(),
+    };
+  }
+  if (id === DEMO_USERS.FREE_JEE.id) {
+    return {
+      id: DEMO_USERS.FREE_JEE.id,
+      name: "New Student",
+      email: "new.student@pragativeer.com",
+      phone: "9999999994",
+      class: "11th",
+      target_exam: "JEE_Main",
+      medium: "English",
+      school: "Army Public School",
+      city: "Jaipur",
+      state: "Rajasthan",
+      tier: "Free",
+      streak_count: 0,
+      longest_streak: 0,
+      created_at: new Date().toISOString(),
+      trial_end: undefined,
+    };
+  }
+  return null;
+}
+
 export function useActiveUser() {
   const [userId, setUserIdState] = useState<string>(() => {
     if (typeof window !== "undefined") {
@@ -155,9 +237,32 @@ export function useActiveUser() {
     return DEFAULT_USER_ID;
   });
 
-  const [user, setUser] = useState<UserProfile | null>(null);
-  const [globalSettings, setGlobalSettings] = useState<any>(null);
-  const [loading, setLoading] = useState(true);
+  const [user, setUser] = useState<UserProfile | null>(() => {
+    const currentId = (typeof window !== "undefined" ? localStorage.getItem("activeUserId") : null) || DEFAULT_USER_ID;
+    if (cachedUserProfile && cachedUserProfile.id === currentId) {
+      return cachedUserProfile;
+    }
+    const demo = getKnownDemoProfile(currentId);
+    if (demo) {
+      cachedUserProfile = demo;
+      return demo;
+    }
+    if (typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem("pragativeer_cached_user");
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          if (parsed && parsed.id === currentId) {
+            cachedUserProfile = parsed;
+            return parsed;
+          }
+        }
+      } catch {}
+    }
+    return null;
+  });
+  const [globalSettings, setGlobalSettings] = useState<any>(() => cachedSettings);
+  const [loading, setLoading] = useState(() => !cachedUserProfile);
   const [switching, setSwitching] = useState(false);
   const [error, setError] = useState<string | null>(null);
   // Use a ref for fail count so it doesn't cause re-renders
@@ -205,14 +310,17 @@ export function useActiveUser() {
         }
       }
 
+      cachedUserProfile = data;
+      if (typeof window !== "undefined") {
+        try { localStorage.setItem("pragativeer_cached_user", JSON.stringify(data)); } catch {}
+      }
       setUser(data);
     } catch (err: any) {
       failCountRef.current += 1;
       if (!isPoll) {
         console.warn("Backend unreachable, using local demo profile for offline testing:", err.message);
       }
-      // If backend is unreachable (e.g. running only npm run dev), provide demo user so testing works
-      setUser((prev) => prev || {
+      const fallback = getKnownDemoProfile(id) || {
         id: id || DEFAULT_USER_ID,
         name: "Aarav",
         email: "demo@pragativeer.com",
@@ -228,7 +336,9 @@ export function useActiveUser() {
         longest_streak: 21,
         created_at: new Date(Date.now() - 5 * 86400000).toISOString(),
         trial_end: new Date(Date.now() + 10 * 86400000).toISOString(),
-      });
+      };
+      if (!cachedUserProfile) cachedUserProfile = fallback;
+      setUser((prev) => prev || fallback);
       // Silently swallow polling errors so the UI doesn't crash
     } finally {
       if (!isPoll) setLoading(false);
@@ -290,11 +400,13 @@ export function useActiveUser() {
       // Update refs and state before awaiting network
       activeUserIdRef.current = actualUserId;
       setUserIdState(actualUserId);
-      setUser(null); // Clear old user immediately so stale data isn't shown
+      const demo = getKnownDemoProfile(actualUserId);
+      cachedUserProfile = demo;
+      setUser(demo);
 
       // Notify listeners immediately of account switch
       if (typeof window !== "undefined") {
-        window.dispatchEvent(new CustomEvent("pragativeer-user-switched", { detail: { userId: actualUserId } }));
+        window.dispatchEvent(new CustomEvent("pragativeer-user-switched", { detail: { userId: actualUserId, user: demo } }));
       }
 
       // Fetch the new user's profile immediately using the new token
@@ -302,6 +414,10 @@ export function useActiveUser() {
 
       if (newUserRes && newUserRes.ok) {
         const data = await newUserRes.json();
+        cachedUserProfile = data;
+        if (typeof window !== "undefined") {
+          try { localStorage.setItem("pragativeer_cached_user", JSON.stringify(data)); } catch {}
+        }
         setUser(data);
         if (typeof window !== "undefined") {
           window.dispatchEvent(new CustomEvent("pragativeer-user-switched", { detail: { userId: actualUserId, user: data } }));