diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5ceede57..a0526e0b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,72 +1,81 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { Box, CircularProgress, Typography } from '@mui/material';
import { ClerkProvider, useAuth } from '@clerk/clerk-react';
-import Wizard from './components/OnboardingWizard/Wizard';
-import MainDashboard from './components/MainDashboard/MainDashboard';
-import SEODashboard from './components/SEODashboard/SEODashboard';
-import ContentPlanningDashboard from './components/ContentPlanningDashboard/ContentPlanningDashboard';
-import FacebookWriter from './components/FacebookWriter/FacebookWriter';
-import LinkedInWriter from './components/LinkedInWriter/LinkedInWriter';
-import BlogWriter from './components/BlogWriter/BlogWriter';
-import StoryWriter from './components/StoryWriter/StoryWriter';
-import { StoryProjectList } from './components/StoryWriter/StoryProjectList';
-import YouTubeCreator from './components/YouTubeCreator/YouTubeCreator';
-import { CreateStudio, EditStudio, UpscaleStudio, ControlStudio, SocialOptimizer, AssetLibrary, ImageStudioDashboard, FaceSwapStudio, CompressionStudio, ImageProcessingStudio } from './components/ImageStudio';
-import {
- VideoStudioDashboard,
- CreateVideo,
- AvatarVideo,
- EnhanceVideo,
- ExtendVideo,
- EditVideo,
- TransformVideo,
- SocialVideo,
- FaceSwap,
- VideoTranslate,
- VideoBackgroundRemover,
- AddAudioToVideo,
- LibraryVideo,
-} from './components/VideoStudio';
-import {
- ProductMarketingDashboard,
- ProductPhotoshootStudio,
- ProductAnimationStudio,
- ProductVideoStudio,
- ProductAvatarStudio,
-} from './components/ProductMarketing';
-import PodcastDashboard from './components/PodcastMaker/PodcastDashboard';
-import PricingPage from './components/Pricing/PricingPage';
-import WixTestPage from './components/WixTestPage/WixTestPage';
-import WixCallbackPage from './components/WixCallbackPage/WixCallbackPage';
-import WordPressCallbackPage from './components/WordPressCallbackPage/WordPressCallbackPage';
-import BingCallbackPage from './components/BingCallbackPage/BingCallbackPage';
-import BingAnalyticsStorage from './components/BingAnalyticsStorage/BingAnalyticsStorage';
-import ResearchDashboard from './pages/ResearchDashboard';
-import IntentResearchTest from './pages/IntentResearchTest';
-import SchedulerDashboard from './pages/SchedulerDashboard';
-import BillingPage from './pages/BillingPage';
-import ApprovalsPage from './pages/ApprovalsPage';
-import TeamActivityPage from './pages/TeamActivityPage';
-import StripeDisputesDashboard from './pages/StripeDisputesDashboard';
import ProtectedRoute from './components/shared/ProtectedRoute';
-import GSCAuthCallback from './components/SEODashboard/components/GSCAuthCallback';
-import Landing from './components/Landing/Landing';
import ErrorBoundary from './components/shared/ErrorBoundary';
-import ErrorBoundaryTest from './components/shared/ErrorBoundaryTest';
import { OnboardingProvider } from './contexts/OnboardingContext';
import { SubscriptionProvider } from './contexts/SubscriptionContext';
import InitialRouteHandler from './components/App/InitialRouteHandler';
import TokenInstaller from './components/App/TokenInstaller';
import { ConditionalCopilotKit, AuthenticatedCopilotWrapper } from './components/App/CopilotWrappers';
+import Landing from './components/Landing/Landing';
+import LazyLoadingFallback from './components/shared/LazyLoadingFallback';
-// interface OnboardingStatus {
-// onboarding_required: boolean;
-// onboarding_complete: boolean;
-// current_step?: number;
-// total_steps?: number;
-// completion_percentage?: number;
-// }
+// ─── Lazy loaded route components ───────────────────────────────────────────
+// Default exports
+const Wizard = React.lazy(() => import('./components/OnboardingWizard/Wizard'));
+const MainDashboard = React.lazy(() => import('./components/MainDashboard/MainDashboard'));
+const SEODashboard = React.lazy(() => import('./components/SEODashboard/SEODashboard'));
+const ContentPlanningDashboard = React.lazy(() => import('./components/ContentPlanningDashboard/ContentPlanningDashboard'));
+const FacebookWriter = React.lazy(() => import('./components/FacebookWriter/FacebookWriter'));
+const LinkedInWriter = React.lazy(() => import('./components/LinkedInWriter/LinkedInWriter'));
+const BlogWriter = React.lazy(() => import('./components/BlogWriter/BlogWriter'));
+const StoryWriter = React.lazy(() => import('./components/StoryWriter/StoryWriter'));
+const YouTubeCreator = React.lazy(() => import('./components/YouTubeCreator/YouTubeCreator'));
+const PodcastDashboard = React.lazy(() => import('./components/PodcastMaker/PodcastDashboard'));
+const PricingPage = React.lazy(() => import('./components/Pricing/PricingPage'));
+const WixTestPage = React.lazy(() => import('./components/WixTestPage/WixTestPage'));
+const WixCallbackPage = React.lazy(() => import('./components/WixCallbackPage/WixCallbackPage'));
+const WordPressCallbackPage = React.lazy(() => import('./components/WordPressCallbackPage/WordPressCallbackPage'));
+const BingCallbackPage = React.lazy(() => import('./components/BingCallbackPage/BingCallbackPage'));
+const BingAnalyticsStorage = React.lazy(() => import('./components/BingAnalyticsStorage/BingAnalyticsStorage'));
+const ResearchDashboard = React.lazy(() => import('./pages/ResearchDashboard'));
+const IntentResearchTest = React.lazy(() => import('./pages/IntentResearchTest'));
+const SchedulerDashboard = React.lazy(() => import('./pages/SchedulerDashboard'));
+const BillingPage = React.lazy(() => import('./pages/BillingPage'));
+const ApprovalsPage = React.lazy(() => import('./pages/ApprovalsPage'));
+const TeamActivityPage = React.lazy(() => import('./pages/TeamActivityPage'));
+const StripeDisputesDashboard = React.lazy(() => import('./pages/StripeDisputesDashboard'));
+const GSCAuthCallback = React.lazy(() => import('./components/SEODashboard/components/GSCAuthCallback'));
+const ErrorBoundaryTest = React.lazy(() => import('./components/shared/ErrorBoundaryTest'));
+
+// Named exports — need .then() wrapper to resolve default
+const StoryProjectList = React.lazy(() => import('./components/StoryWriter/StoryProjectList').then(m => ({ default: m.StoryProjectList })));
+
+// ImageStudio barrel (10 named exports)
+const CreateStudio = React.lazy(() => import('./components/ImageStudio').then(m => ({ default: m.CreateStudio })));
+const EditStudio = React.lazy(() => import('./components/ImageStudio').then(m => ({ default: m.EditStudio })));
+const UpscaleStudio = React.lazy(() => import('./components/ImageStudio').then(m => ({ default: m.UpscaleStudio })));
+const ControlStudio = React.lazy(() => import('./components/ImageStudio').then(m => ({ default: m.ControlStudio })));
+const SocialOptimizer = React.lazy(() => import('./components/ImageStudio').then(m => ({ default: m.SocialOptimizer })));
+const AssetLibrary = React.lazy(() => import('./components/ImageStudio').then(m => ({ default: m.AssetLibrary })));
+const ImageStudioDashboard = React.lazy(() => import('./components/ImageStudio').then(m => ({ default: m.ImageStudioDashboard })));
+const FaceSwapStudio = React.lazy(() => import('./components/ImageStudio').then(m => ({ default: m.FaceSwapStudio })));
+const CompressionStudio = React.lazy(() => import('./components/ImageStudio').then(m => ({ default: m.CompressionStudio })));
+const ImageProcessingStudio = React.lazy(() => import('./components/ImageStudio').then(m => ({ default: m.ImageProcessingStudio })));
+
+// VideoStudio barrel (13 named exports)
+const VideoStudioDashboard = React.lazy(() => import('./components/VideoStudio').then(m => ({ default: m.VideoStudioDashboard })));
+const CreateVideo = React.lazy(() => import('./components/VideoStudio').then(m => ({ default: m.CreateVideo })));
+const AvatarVideo = React.lazy(() => import('./components/VideoStudio').then(m => ({ default: m.AvatarVideo })));
+const EnhanceVideo = React.lazy(() => import('./components/VideoStudio').then(m => ({ default: m.EnhanceVideo })));
+const ExtendVideo = React.lazy(() => import('./components/VideoStudio').then(m => ({ default: m.ExtendVideo })));
+const EditVideo = React.lazy(() => import('./components/VideoStudio').then(m => ({ default: m.EditVideo })));
+const TransformVideo = React.lazy(() => import('./components/VideoStudio').then(m => ({ default: m.TransformVideo })));
+const SocialVideo = React.lazy(() => import('./components/VideoStudio').then(m => ({ default: m.SocialVideo })));
+const FaceSwap = React.lazy(() => import('./components/VideoStudio').then(m => ({ default: m.FaceSwap })));
+const VideoTranslate = React.lazy(() => import('./components/VideoStudio').then(m => ({ default: m.VideoTranslate })));
+const VideoBackgroundRemover = React.lazy(() => import('./components/VideoStudio').then(m => ({ default: m.VideoBackgroundRemover })));
+const AddAudioToVideo = React.lazy(() => import('./components/VideoStudio').then(m => ({ default: m.AddAudioToVideo })));
+const LibraryVideo = React.lazy(() => import('./components/VideoStudio').then(m => ({ default: m.LibraryVideo })));
+
+// ProductMarketing barrel (5 named exports)
+const ProductMarketingDashboard = React.lazy(() => import('./components/ProductMarketing').then(m => ({ default: m.ProductMarketingDashboard })));
+const ProductPhotoshootStudio = React.lazy(() => import('./components/ProductMarketing').then(m => ({ default: m.ProductPhotoshootStudio })));
+const ProductAnimationStudio = React.lazy(() => import('./components/ProductMarketing').then(m => ({ default: m.ProductAnimationStudio })));
+const ProductVideoStudio = React.lazy(() => import('./components/ProductMarketing').then(m => ({ default: m.ProductVideoStudio })));
+const ProductAvatarStudio = React.lazy(() => import('./components/ProductMarketing').then(m => ({ default: m.ProductAvatarStudio })));
// Root route that chooses Landing (signed out) or InitialRouteHandler (signed in)
const RootRoute: React.FC = () => {
@@ -162,78 +171,80 @@ const App: React.FC = () => {
-
- } />
-
-
-
- }
- />
- {/* Error Boundary Testing - Development Only */}
- {process.env.NODE_ENV === 'development' && (
- } />
- )}
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
-
+ }>
+
+ } />
+
+
+
+ }
+ />
+ {/* Error Boundary Testing - Development Only */}
+ {process.env.NODE_ENV === 'development' && (
+ } />
+ )}
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
@@ -261,4 +272,4 @@ const App: React.FC = () => {
);
};
-export default App;
+export default App;
diff --git a/frontend/src/components/shared/LazyLoadingFallback.tsx b/frontend/src/components/shared/LazyLoadingFallback.tsx
new file mode 100644
index 00000000..05047488
--- /dev/null
+++ b/frontend/src/components/shared/LazyLoadingFallback.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box, CircularProgress, Typography } from '@mui/material';
+
+interface LazyLoadingFallbackProps {
+ message?: string;
+}
+
+const LazyLoadingFallback: React.FC = ({
+ message = 'Loading...'
+}) => {
+ return (
+
+
+
+ {message}
+
+
+ );
+};
+
+export default LazyLoadingFallback;