From de0e42cca80987a8c31808c30b31ffe0d354a05c Mon Sep 17 00:00:00 2001
From: "IGNY8 VPS (Salman)" <vps@igny8.com>
Date: Mon, 5 Jan 2026 04:52:16 +0000
Subject: [PATCH] Phase 1 fixes

---
 frontend/src/App.tsx                          |  4 ++--
 .../src/components/common/SuspenseLoader.tsx  | 16 ++++++++++++++
 frontend/src/layout/AppLayout.tsx             | 11 ++--------
 .../src/pages/Automation/AutomationPage.tsx   |  8 -------
 .../src/pages/Optimizer/ContentSelector.tsx   |  9 +-------
 frontend/src/pages/Planner/ClusterDetail.tsx  | 11 ----------
 .../src/pages/Publisher/ContentCalendar.tsx   | 11 ----------
 .../src/pages/Settings/CreditsAndBilling.tsx  | 12 -----------
 frontend/src/pages/Settings/Sites.tsx         | 11 ----------
 frontend/src/pages/Sites/Content.tsx          |  6 +-----
 frontend/src/pages/Sites/Dashboard.tsx        | 11 ----------
 frontend/src/pages/Sites/List.tsx             | 11 ----------
 frontend/src/pages/Sites/PageManager.tsx      | 11 ----------
 frontend/src/pages/Sites/PostEditor.tsx       | 11 ----------
 frontend/src/pages/Sites/PublishingQueue.tsx  | 11 ----------
 frontend/src/pages/Sites/Settings.tsx         | 11 ----------
 frontend/src/pages/Sites/SyncDashboard.tsx    | 11 ----------
 frontend/src/pages/Thinker/Prompts.tsx        | 14 -------------
 .../src/pages/account/AccountSettingsPage.tsx |  1 -
 .../src/pages/account/ContentSettingsPage.tsx | 14 -------------
 .../src/pages/account/PurchaseCreditsPage.tsx | 17 ---------------
 .../src/pages/account/UsageAnalyticsPage.tsx  | 21 -------------------
 22 files changed, 22 insertions(+), 221 deletions(-)
 create mode 100644 frontend/src/components/common/SuspenseLoader.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5de2ea90..ff9d1e6b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -10,6 +10,7 @@ import LoadingStateMonitor from "./components/common/LoadingStateMonitor";
 import { PageProvider } from "./context/PageContext";
 import { useAuthStore } from "./store/authStore";
 import { useModuleStore } from "./store/moduleStore";
+import SuspenseLoader from "./components/common/SuspenseLoader";
 
 // Auth pages - loaded immediately (needed for login)
 import SignIn from "./pages/AuthPages/SignIn";
@@ -131,8 +132,7 @@ export default function App() {
       <LoadingStateMonitor />
       <HelmetProvider>
         <ScrollToTop />
-        {/* CRITICAL FIX: Move Suspense OUTSIDE Routes to prevent Router context loss during HMR */}
-        <Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div className="text-lg">Loading...</div></div>}>
+        <Suspense fallback={<SuspenseLoader />}>
         <Routes>
           {/* Auth Routes - Public */}
           <Route path="/signin" element={<SignIn />} />
diff --git a/frontend/src/components/common/SuspenseLoader.tsx b/frontend/src/components/common/SuspenseLoader.tsx
new file mode 100644
index 00000000..b6142d79
--- /dev/null
+++ b/frontend/src/components/common/SuspenseLoader.tsx
@@ -0,0 +1,16 @@
+/**
+ * Suspense Loader - Standalone loading component for React Suspense fallback
+ * No context dependencies - can be used anywhere
+ */
+import React from 'react';
+
+const SuspenseLoader: React.FC = () => {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen gap-4">
+      <div className="h-10 w-10 border-4 border-gray-200 border-t-brand-500 rounded-full animate-spin" />
+      <p className="text-gray-600 dark:text-gray-400 text-sm">Loading page...</p>
+    </div>
+  );
+};
+
+export default SuspenseLoader;
diff --git a/frontend/src/layout/AppLayout.tsx b/frontend/src/layout/AppLayout.tsx
index 97e80829..275f154d 100644
--- a/frontend/src/layout/AppLayout.tsx
+++ b/frontend/src/layout/AppLayout.tsx
@@ -11,8 +11,7 @@ import { useHeaderMetrics } from "../context/HeaderMetricsContext";
 import { useErrorHandler } from "../hooks/useErrorHandler";
 import { trackLoading } from "../components/common/LoadingStateMonitor";
 import PendingPaymentBanner from "../components/billing/PendingPaymentBanner";
-import { PageLoadingProvider, usePageLoadingContext } from "../context/PageLoadingContext";
-import PageLoader from "../components/common/PageLoader";
+import { PageLoadingProvider } from "../context/PageLoadingContext";
 
 const LayoutContent: React.FC = () => {
   const { isExpanded, isHovered, isMobileOpen } = useSidebar();
@@ -178,14 +177,8 @@ const LayoutContent: React.FC = () => {
   );
 };
 
-// Wrapper component to conditionally render Outlet or PageLoader
+// Wrapper component - just renders children (global loading removed to avoid unmounting issues)
 const PageLoaderWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const { isLoading } = usePageLoadingContext();
-  
-  if (isLoading) {
-    return <PageLoader />;
-  }
-  
   return <>{children}</>;
 };
 
diff --git a/frontend/src/pages/Automation/AutomationPage.tsx b/frontend/src/pages/Automation/AutomationPage.tsx
index b6ea724e..0597cd39 100644
--- a/frontend/src/pages/Automation/AutomationPage.tsx
+++ b/frontend/src/pages/Automation/AutomationPage.tsx
@@ -372,14 +372,6 @@ const AutomationPage: React.FC = () => {
     }
   };
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-[60vh]">
-        <div className="text-lg text-gray-600 dark:text-gray-400">Loading automation...</div>
-      </div>
-    );
-  }
-
   if (!activeSite) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
diff --git a/frontend/src/pages/Optimizer/ContentSelector.tsx b/frontend/src/pages/Optimizer/ContentSelector.tsx
index 453e62cf..d7042102 100644
--- a/frontend/src/pages/Optimizer/ContentSelector.tsx
+++ b/frontend/src/pages/Optimizer/ContentSelector.tsx
@@ -184,13 +184,7 @@ export default function OptimizerContentSelector() {
         {/* Filters */}
         <ContentFilter onFilterChange={setFilters} />
 
-        {loading ? (
-          <div className="text-center py-12">
-            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-brand-500"></div>
-            <p className="mt-2 text-gray-600 dark:text-gray-400">Loading content...</p>
-          </div>
-        ) : (
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
             <div className="overflow-x-auto">
               <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                 <thead className="bg-gray-50 dark:bg-gray-900">
@@ -300,7 +294,6 @@ export default function OptimizerContentSelector() {
               </div>
             )}
           </div>
-        )}
 
         {/* Module footer placeholder - module on hold */}
       </div>
diff --git a/frontend/src/pages/Planner/ClusterDetail.tsx b/frontend/src/pages/Planner/ClusterDetail.tsx
index ef2b9167..2cefda9a 100644
--- a/frontend/src/pages/Planner/ClusterDetail.tsx
+++ b/frontend/src/pages/Planner/ClusterDetail.tsx
@@ -119,17 +119,6 @@ export default function ClusterDetail() {
     setActiveTab(tab);
   };
 
-  if (loading) {
-    return (
-      <>
-        <PageMeta title="Cluster Details" description="Loading cluster information" />
-        <div className="flex items-center justify-center h-64">
-          <div className="text-gray-500">Loading cluster...</div>
-        </div>
-      </>
-    );
-  }
-
   if (!cluster) {
     return (
       <>
diff --git a/frontend/src/pages/Publisher/ContentCalendar.tsx b/frontend/src/pages/Publisher/ContentCalendar.tsx
index 287831b1..9f0f00ff 100644
--- a/frontend/src/pages/Publisher/ContentCalendar.tsx
+++ b/frontend/src/pages/Publisher/ContentCalendar.tsx
@@ -392,17 +392,6 @@ export default function ContentCalendar() {
     );
   }
 
-  if (loading) {
-    return (
-      <>
-        <PageMeta title="Content Calendar" description="View and manage scheduled content" />
-        <div className="flex items-center justify-center h-64">
-          <div className="text-gray-500">Loading calendar...</div>
-        </div>
-      </>
-    );
-  }
-
   return (
     <>
       <PageMeta title="Content Calendar" description="View and manage scheduled content" />
diff --git a/frontend/src/pages/Settings/CreditsAndBilling.tsx b/frontend/src/pages/Settings/CreditsAndBilling.tsx
index 7ad2a238..e2e58ca3 100644
--- a/frontend/src/pages/Settings/CreditsAndBilling.tsx
+++ b/frontend/src/pages/Settings/CreditsAndBilling.tsx
@@ -64,18 +64,6 @@ const CreditsAndBilling: React.FC = () => {
     ).join(' ');
   };
 
-  if (loading) {
-    return (
-      <>
-        <PageMeta title="Usage & Billing" description="View your usage and billing" />
-        <div className="text-center py-12">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
-          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading billing data...</p>
-        </div>
-      </>
-    );
-  }
-
   return (
     <>
       <PageMeta title="Usage & Billing" description="View your usage and billing" />
diff --git a/frontend/src/pages/Settings/Sites.tsx b/frontend/src/pages/Settings/Sites.tsx
index 44a3742a..59c54181 100644
--- a/frontend/src/pages/Settings/Sites.tsx
+++ b/frontend/src/pages/Settings/Sites.tsx
@@ -375,17 +375,6 @@ export default function Sites() {
     return industry?.sectors || [];
   };
 
-  if (loading) {
-    return (
-      <div className="flex h-screen items-center justify-center">
-        <div className="text-center">
-          <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-brand-600 mx-auto"></div>
-          <p className="text-gray-600 dark:text-gray-400">Loading sites...</p>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <>
       <PageMeta title="Your Websites" description="Manage all your websites here - Add new sites, configure settings, and track content for each one" />
diff --git a/frontend/src/pages/Sites/Content.tsx b/frontend/src/pages/Sites/Content.tsx
index 5ee736aa..1d9162ed 100644
--- a/frontend/src/pages/Sites/Content.tsx
+++ b/frontend/src/pages/Sites/Content.tsx
@@ -215,11 +215,7 @@ export default function SiteContentManager() {
       </Card>
 
       {/* Content List */}
-      {loading ? (
-        <Card className="p-12 text-center">
-          <div className="text-gray-500">Loading content...</div>
-        </Card>
-      ) : filteredContent.length === 0 ? (
+      {filteredContent.length === 0 ? (
         <Card className="p-12 text-center">
           <p className="text-gray-600 dark:text-gray-400 mb-4">
             No content found
diff --git a/frontend/src/pages/Sites/Dashboard.tsx b/frontend/src/pages/Sites/Dashboard.tsx
index 872489fd..699936ba 100644
--- a/frontend/src/pages/Sites/Dashboard.tsx
+++ b/frontend/src/pages/Sites/Dashboard.tsx
@@ -229,17 +229,6 @@ export default function SiteDashboard() {
     }
   };
 
-  if (loading) {
-    return (
-      <>
-        <PageMeta title="Site Dashboard" />
-        <div className="flex items-center justify-center h-64">
-          <div className="text-gray-500">Loading site dashboard...</div>
-        </div>
-      </>
-    );
-  }
-
   if (!site) {
     return (
       <>
diff --git a/frontend/src/pages/Sites/List.tsx b/frontend/src/pages/Sites/List.tsx
index aef4b12d..c7a9f050 100644
--- a/frontend/src/pages/Sites/List.tsx
+++ b/frontend/src/pages/Sites/List.tsx
@@ -477,17 +477,6 @@ export default function SiteList() {
 
   const hasActiveFilters = searchTerm || siteTypeFilter || hostingTypeFilter || statusFilter || integrationFilter;
 
-  if (loading) {
-    return (
-      <>
-        <PageMeta title="Site List" />
-        <div className="flex items-center justify-center h-64">
-          <div className="text-gray-500">Loading sites...</div>
-        </div>
-      </>
-    );
-  }
-
   return (
     <>
       <PageMeta title="Your Websites - IGNY8" />
diff --git a/frontend/src/pages/Sites/PageManager.tsx b/frontend/src/pages/Sites/PageManager.tsx
index 8542d5f2..62f77e03 100644
--- a/frontend/src/pages/Sites/PageManager.tsx
+++ b/frontend/src/pages/Sites/PageManager.tsx
@@ -264,17 +264,6 @@ export default function PageManager() {
     }
   };
 
-  if (loading) {
-    return (
-      <>
-        <PageMeta title="Page Manager" />
-        <div className="flex items-center justify-center h-64">
-          <div className="text-gray-500">Loading pages...</div>
-        </div>
-      </>
-    );
-  }
-
   return (
     <>
       <PageMeta title="Page Manager - IGNY8" />
diff --git a/frontend/src/pages/Sites/PostEditor.tsx b/frontend/src/pages/Sites/PostEditor.tsx
index 3929a36a..7c5c2558 100644
--- a/frontend/src/pages/Sites/PostEditor.tsx
+++ b/frontend/src/pages/Sites/PostEditor.tsx
@@ -216,17 +216,6 @@ export default function PostEditor() {
     { value: 'published', label: 'Published' },
   ];
 
-  if (loading) {
-    return (
-      <>
-        <PageMeta title="Post Editor" />
-        <div className="flex items-center justify-center h-64">
-          <div className="text-gray-500">Loading post...</div>
-        </div>
-      </>
-    );
-  }
-
   return (
     <>
       <PageMeta title={content.id ? 'Edit Post' : 'New Post'} />
diff --git a/frontend/src/pages/Sites/PublishingQueue.tsx b/frontend/src/pages/Sites/PublishingQueue.tsx
index 332841bd..200b8b88 100644
--- a/frontend/src/pages/Sites/PublishingQueue.tsx
+++ b/frontend/src/pages/Sites/PublishingQueue.tsx
@@ -206,17 +206,6 @@ export default function PublishingQueue() {
     });
   };
 
-  if (loading) {
-    return (
-      <>
-        <PageMeta title="Publishing Queue" description="View and manage scheduled content" />
-        <div className="flex items-center justify-center h-64">
-          <div className="text-gray-500">Loading queue...</div>
-        </div>
-      </>
-    );
-  }
-
   return (
     <>
       <PageMeta title="Publishing Queue" description="View and manage scheduled content" />
diff --git a/frontend/src/pages/Sites/Settings.tsx b/frontend/src/pages/Sites/Settings.tsx
index 46bdee9d..999f1f23 100644
--- a/frontend/src/pages/Sites/Settings.tsx
+++ b/frontend/src/pages/Sites/Settings.tsx
@@ -667,17 +667,6 @@ export default function SiteSettings() {
     { value: 'multi', label: 'Multi-Destination' },
   ];
 
-  if (loading) {
-    return (
-      <>
-        <PageMeta title="Site Settings" />
-        <div className="flex items-center justify-center h-64">
-          <div className="text-gray-500">Loading site settings...</div>
-        </div>
-      </>
-    );
-  }
-
   return (
     <>
       <PageMeta title="Site Settings - IGNY8" />
diff --git a/frontend/src/pages/Sites/SyncDashboard.tsx b/frontend/src/pages/Sites/SyncDashboard.tsx
index bfb68c14..e045c8d3 100644
--- a/frontend/src/pages/Sites/SyncDashboard.tsx
+++ b/frontend/src/pages/Sites/SyncDashboard.tsx
@@ -116,17 +116,6 @@ export default function SyncDashboard() {
     }
   };
 
-  if (loading) {
-    return (
-      <>
-        <PageMeta title="Sync Dashboard" />
-        <div className="flex items-center justify-center h-64">
-          <div className="text-gray-500">Loading sync data...</div>
-        </div>
-      </>
-    );
-  }
-
   if (!syncStatus) {
     return (
       <>
diff --git a/frontend/src/pages/Thinker/Prompts.tsx b/frontend/src/pages/Thinker/Prompts.tsx
index 05383e05..f148f091 100644
--- a/frontend/src/pages/Thinker/Prompts.tsx
+++ b/frontend/src/pages/Thinker/Prompts.tsx
@@ -184,20 +184,6 @@ export default function Prompts() {
     });
   };
 
-  if (loading) {
-    return (
-      <>
-        <PageMeta title="Prompts - IGNY8" description="AI prompts management" />
-        <div className="flex items-center justify-center min-h-screen">
-          <div className="text-center">
-            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mx-auto"></div>
-            <p className="mt-4 text-gray-600 dark:text-gray-400">Loading prompts...</p>
-          </div>
-        </div>
-      </>
-    );
-  }
-
   return (
     <>
       <PageMeta title="Prompt Library - IGNY8" description="Manage your AI writing prompts" />
diff --git a/frontend/src/pages/account/AccountSettingsPage.tsx b/frontend/src/pages/account/AccountSettingsPage.tsx
index 1da7a5ef..f7f86355 100644
--- a/frontend/src/pages/account/AccountSettingsPage.tsx
+++ b/frontend/src/pages/account/AccountSettingsPage.tsx
@@ -832,7 +832,6 @@ export default function AccountSettingsPage() {
           </div>
         </div>
       </Modal>
-    </div>
     </>
   );
 }
diff --git a/frontend/src/pages/account/ContentSettingsPage.tsx b/frontend/src/pages/account/ContentSettingsPage.tsx
index 3115c767..cb301a19 100644
--- a/frontend/src/pages/account/ContentSettingsPage.tsx
+++ b/frontend/src/pages/account/ContentSettingsPage.tsx
@@ -311,20 +311,6 @@ export default function ContentSettingsPage() {
     images: 'Image Settings',
   };
 
-  if (loading) {
-    return (
-      <div className="p-6">
-        <PageMeta title="Content Settings" description="Configure your content generation settings" />
-        <div className="flex items-center justify-center h-64">
-          <div className="flex flex-col items-center gap-3">
-            <Loader2Icon className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
-            <div className="text-gray-500 dark:text-gray-400">Loading settings...</div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="p-6">
       <PageMeta title="Content Settings" description="Configure your content generation settings" />
diff --git a/frontend/src/pages/account/PurchaseCreditsPage.tsx b/frontend/src/pages/account/PurchaseCreditsPage.tsx
index 71b5c942..5027c2f6 100644
--- a/frontend/src/pages/account/PurchaseCreditsPage.tsx
+++ b/frontend/src/pages/account/PurchaseCreditsPage.tsx
@@ -145,23 +145,6 @@ export default function PurchaseCreditsPage() {
     }
   };
 
-  if (loading) {
-    return (
-      <>
-        <PageMeta title="Purchase Credits" description="Top up your account with credit packages" />
-        <PageHeader
-          title="Purchase Credits"
-          badge={{ icon: <ZapIcon className="w-4 h-4" />, color: 'blue' }}
-        />
-        <div className="p-6">
-          <div className="flex items-center justify-center h-64">
-            <Loader2Icon className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
-          </div>
-        </div>
-      </>
-    );
-  }
-
   if (showManualPaymentForm && invoiceData) {
     const selectedMethod = paymentMethods.find((m) => m.type === selectedPaymentMethod);
 
diff --git a/frontend/src/pages/account/UsageAnalyticsPage.tsx b/frontend/src/pages/account/UsageAnalyticsPage.tsx
index aa37f678..53f7ae93 100644
--- a/frontend/src/pages/account/UsageAnalyticsPage.tsx
+++ b/frontend/src/pages/account/UsageAnalyticsPage.tsx
@@ -56,26 +56,6 @@ export default function UsageAnalyticsPage() {
     }
   };
 
-  if (loading) {
-    return (
-      <>
-        <PageMeta title="Usage & Analytics" description="Monitor your plan limits and usage" />
-        <PageHeader
-          title="Usage & Analytics"
-          badge={{ icon: <TrendingUpIcon className="w-4 h-4" />, color: 'blue' }}
-        />
-        <div className="p-6">
-          <div className="flex items-center justify-center h-64">
-            <div className="flex flex-col items-center gap-3">
-              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-500"></div>
-              <div className="text-gray-500 dark:text-gray-400">Loading usage data...</div>
-            </div>
-          </div>
-        </div>
-      </>
-    );
-  }
-
   const tabTitles: Record<TabType, string> = {
     limits: 'Limits & Usage',
     activity: 'Credit History',
@@ -280,7 +260,6 @@ export default function UsageAnalyticsPage() {
           </div>
         )}
       </div>
-    </div>
     </>
   );
 }