Pre luanch plan phase 1 complete

frontend/src/layout/AppLayout.tsx

@@ -11,6 +11,8 @@ 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";
 
 const LayoutContent: React.FC = () => {
   const { isExpanded, isHovered, isMobileOpen } = useSidebar();
@@ -139,17 +141,9 @@ const LayoutContent: React.FC = () => {
       accentColor = 'purple';
     }
     
-    // Format credit value with K/M suffix for large numbers
+    // Format credit value with full number and comma separators
     const formatCredits = (val: number): string => {
-      if (val >= 1000000) {
-        const millions = val / 1000000;
-        return millions % 1 === 0 ? `${millions}M` : `${millions.toFixed(1)}M`;
-      }
-      if (val >= 1000) {
-        const thousands = val / 1000;
-        return thousands % 1 === 0 ? `${thousands}K` : `${thousands.toFixed(1)}K`;
-      }
-      return val.toString();
+      return val.toLocaleString();
     };
     
     // Set credit balance - show as "used/total Credits"
@@ -174,18 +168,33 @@ const LayoutContent: React.FC = () => {
         <AppHeader />
         {/* Pending Payment Banner - Shows when account status is 'pending_payment' */}
         <PendingPaymentBanner className="mx-4 mt-2 md:mx-6 md:mt-2" />
-        <div className="px-4 pt-1.5 pb-20 md:px-6 md:pt-1.5 md:pb-24">
-          <Outlet />
+        <div className="p-3">
+          <PageLoaderWrapper>
+            <Outlet />
+          </PageLoaderWrapper>
         </div>
       </div>
     </div>
   );
 };
 
+// Wrapper component to conditionally render Outlet or PageLoader
+const PageLoaderWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { isLoading } = usePageLoadingContext();
+  
+  if (isLoading) {
+    return <PageLoader />;
+  }
+  
+  return <>{children}</>;
+};
+
 const AppLayout: React.FC = () => {
   return (
     <SidebarProvider>
-      <LayoutContent />
+      <PageLoadingProvider>
+        <LayoutContent />
+      </PageLoadingProvider>
     </SidebarProvider>
   );
 };