Pre luanch plan phase 1 complete

frontend/src/pages/account/PlansAndBillingPage.tsx

@@ -24,6 +24,7 @@ import CreditCostBreakdownPanel from '../../components/billing/CreditCostBreakdo
 // import CreditCostsPanel from '../../components/billing/CreditCostsPanel'; // Hidden from regular users
 // import UsageLimitsPanel from '../../components/billing/UsageLimitsPanel'; // Moved to UsageAnalyticsPage
 import { convertToPricingPlan } from '../../utils/pricingHelpers';
+import { usePageLoading } from '../../context/PageLoadingContext';
 import {
   getCreditBalance,
   getCreditPackages,
@@ -63,7 +64,7 @@ export default function PlansAndBillingPage() {
   const location = useLocation();
   // Derive active tab from URL path
   const activeTab = getTabFromPath(location.pathname);
-  const [loading, setLoading] = useState(true);
+  const { startLoading, stopLoading } = usePageLoading();
   const [error, setError] = useState<string>('');
   const [planLoadingId, setPlanLoadingId] = useState<number | null>(null);
   const [purchaseLoadingId, setPurchaseLoadingId] = useState<number | null>(null);
@@ -109,7 +110,7 @@ export default function PlansAndBillingPage() {
 
   const loadData = async (allowRetry = true) => {
     try {
-      setLoading(true);
+      startLoading('Loading billing data...');
       // Fetch in controlled sequence to avoid burst 429s on auth/system scopes
       const balanceData = await getCreditBalance();
 
@@ -213,7 +214,7 @@ export default function PlansAndBillingPage() {
         console.error('Billing load error:', err);
       }
     } finally {
-      setLoading(false);
+      stopLoading();
     }
   };
 
@@ -267,7 +268,6 @@ export default function PlansAndBillingPage() {
       handleBillingError(err, 'Failed to purchase credits');
     } finally {
       setPurchaseLoadingId(null);
-      setLoading(false);
     }
   };
 
@@ -340,23 +340,6 @@ export default function PlansAndBillingPage() {
     }
   };
 
-  if (loading) {
-    return (
-      <>
-        <PageMeta title="Plans & Billing" description="Manage your subscription and billing" />
-        <PageHeader
-          title="Plans & Billing"
-          badge={{ icon: <CreditCardIcon 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>
-      </>
-    );
-  }
-
   const currentSubscription = subscriptions.find((sub) => sub.status === 'active') || subscriptions[0];
   const currentPlanId = typeof currentSubscription?.plan === 'object' ? currentSubscription.plan.id : currentSubscription?.plan;
   // Fallback to account plan if subscription is missing
@@ -384,7 +367,7 @@ export default function PlansAndBillingPage() {
         badge={{ icon: <CreditCardIcon className="w-4 h-4" />, color: 'blue' }}
         parent="Plans & Billing"
       />
-      <div className="p-6">
+      
         {/* Activation / pending payment notice */}
         {!hasActivePlan && (
           <div className="mb-4 p-4 rounded-lg border border-warning-200 bg-warning-50 text-warning-800 dark:border-warning-800 dark:bg-warning-900/20 dark:text-warning-200">
@@ -893,7 +876,6 @@ export default function PlansAndBillingPage() {
           </div>
         </div>
       )}
-      </div>
     </>
   );
 }