Phase 3: Lazy load tabs in page.tsx

src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, lazy, Suspense } from 'react';
 import { useGameStore, useGameLoop, fmt, getFloorElement, computeMaxMana, computeRegen, computeClickMana, getMeditationBonus, getIncursionStrength, canAffordSpellCost } from '@/lib/game/store';
 import { getActiveEquipmentSpells, getTotalDPS } from '@/lib/game/computed-stats';
 
@@ -13,10 +13,28 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { RotateCcw } from 'lucide-react';
-import { CraftingTab, SpireTab, SpellsTab, LabTab, SkillsTab, StatsTab, EquipmentTab, AttunementsTab, DebugTab, LootTab, AchievementsTab, GolemancyTab } from '@/components/game/tabs';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { DebugName } from '@/lib/game/debug-context';
+// Non-tab component imports
 import { ActionButtons, CalendarDisplay, ManaDisplay, TimeDisplay } from '@/components/game';
 // Loot and Achievements moved to separate tabs
-import { DebugName } from '@/lib/game/debug-context';
+
+// Lazy load tab components
+const SpireTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.SpireTab })));
+const SkillsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.SkillsTab })));
+const SpellsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.SpellsTab })));
+const LabTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.LabTab })));
+const StatsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.StatsTab })));
+const EquipmentTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.EquipmentTab })));
+const AttunementsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.AttunementsTab })));
+const DebugTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.DebugTab })));
+const LootTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.LootTab })));
+const AchievementsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.AchievementsTab })));
+const GolemancyTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.GolemancyTab })));
+const CraftingTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.CraftingTab })));
+
+// Loading fallback component
+const TabLoadingFallback = () => <div className="p-4 text-center text-gray-400">Loading...</div>;
 
 export default function ManaLoopGame() {
   const [activeTab, setActiveTab] = useState('spire');
@@ -233,79 +251,101 @@ export default function ManaLoopGame() {
 
               <TabsContent value="spire">
                 <DebugName name="SpireTab">
-                  <SpireTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <SpireTab store={store} />
+                  </Suspense>
                 </DebugName>
               </TabsContent>
 
               <TabsContent value="attunements">
                 <DebugName name="AttunementsTab">
-                  <AttunementsTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <AttunementsTab store={store} />
+                  </Suspense>
                 </DebugName>
               </TabsContent>
 
               <TabsContent value="golemancy">
                 <DebugName name="GolemancyTab">
-                  <GolemancyTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <GolemancyTab store={store} />
+                  </Suspense>
                 </DebugName>
               </TabsContent>
 
               <TabsContent value="skills">
                 <DebugName name="SkillsTab">
-                  <SkillsTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <SkillsTab store={store} />
+                  </Suspense>
                 </DebugName>
               </TabsContent>
 
               <TabsContent value="spells">
                 <DebugName name="SpellsTab">
-                  <SpellsTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <SpellsTab store={store} />
+                  </Suspense>
                 </DebugName>
               </TabsContent>
 
               <TabsContent value="equipment">
                 <DebugName name="EquipmentTab">
-                  <EquipmentTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <EquipmentTab store={store} />
+                  </Suspense>
                 </DebugName>
               </TabsContent>
 
               <TabsContent value="crafting">
                 <DebugName name="CraftingTab">
-                  <CraftingTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <CraftingTab store={store} />
+                  </Suspense>
                 </DebugName>
               </TabsContent>
               
               <TabsContent value="loot">
                 <DebugName name="LootTab">
-                  <LootTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <LootTab store={store} />
+                  </Suspense>
                 </DebugName>
               </TabsContent>
 
               <TabsContent value="achievements">
                 <DebugName name="AchievementsTab">
-                  <AchievementsTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <AchievementsTab store={store} />
+                  </Suspense>
                 </DebugName>
               </TabsContent>
 
               <TabsContent value="lab">
                 <DebugName name="LabTab">
-                  <LabTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <LabTab store={store} />
+                  </Suspense>
                 </DebugName>
               </TabsContent>
 
               <TabsContent value="stats">
                 <DebugName name="StatsTab">
-                  <StatsTab
-                    store={store}
-                    upgradeEffects={upgradeEffects}
-                    maxMana={maxMana}
-                    baseRegen={baseRegen}
-                    clickMana={clickMana}
-                    meditationMultiplier={meditationMultiplier}
-                    effectiveRegen={effectiveRegen}
-                    incursionStrength={incursionStrength}
-                    manaCascadeBonus={manaCascadeBonus}
-                    studySpeedMult={studySpeedMult}
-                    studyCostMult={studyCostMult}
-                  />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <StatsTab
+                      store={store}
+                      upgradeEffects={upgradeEffects}
+                      maxMana={maxMana}
+                      baseRegen={baseRegen}
+                      clickMana={clickMana}
+                      meditationMultiplier={meditationMultiplier}
+                      effectiveRegen={effectiveRegen}
+                      incursionStrength={incursionStrength}
+                      manaCascadeBonus={manaCascadeBonus}
+                      studySpeedMult={studySpeedMult}
+                      studyCostMult={studyCostMult}
+                    />
+                  </Suspense>
                 </DebugName>
               </TabsContent>
 
@@ -317,7 +357,9 @@ export default function ManaLoopGame() {
 
               <TabsContent value="debug">
                 <DebugName name="DebugTab">
-                  <DebugTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <DebugTab store={store} />
+                  </Suspense>
                 </DebugName>
               </TabsContent>
             </Tabs>
@@ -460,6 +502,3 @@ export default function ManaLoopGame() {
     );
   }
 }
-
-// Import TooltipProvider
-import { TooltipProvider } from '@/components/ui/tooltip';