Pre luanch plan phase 1 complete

frontend/src/pages/Billing/Credits.tsx

@@ -7,11 +7,12 @@ import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 import Button from '../../components/ui/button/Button';
 import { ArrowUpIcon } from '../../icons';
+import { usePageLoading } from '../../context/PageLoadingContext';
 
 export default function Credits() {
   const toast = useToast();
+  const { startLoading, stopLoading } = usePageLoading();
   const [balance, setBalance] = useState<CreditBalance | null>(null);
-  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     loadBalance();
@@ -19,29 +20,18 @@ export default function Credits() {
 
   const loadBalance = async () => {
     try {
-      setLoading(true);
+      startLoading('Loading content usage...');
       const data = await getCreditBalance();
       setBalance(data);
     } catch (error: any) {
       toast.error(`Failed to load content usage: ${error.message}`);
     } finally {
-      setLoading(false);
+      stopLoading();
     }
   };
 
-  if (loading) {
-    return (
-      <div className="p-6">
-        <PageMeta title="Content Usage" />
-        <div className="flex items-center justify-center h-64">
-          <div className="text-gray-500">Loading...</div>
-        </div>
-      </div>
-    );
-  }
-
   return (
-    <div className="p-6">
+    <>
       <PageMeta title="Content Usage" />
       <div className="flex items-center justify-between mb-6">
         <div>
@@ -126,7 +116,7 @@ export default function Credits() {
           </div>
         </Card>
       </div>
-    </div>
+    </>
   );
 }