Improve the frontend and repository layer

frontend/src/pages/app/analytics/ProcurementAnalyticsPage.tsx

@@ -20,7 +20,7 @@ import { useProcurementDashboard } from '../../../api/hooks/orders';
 import { formatters } from '../../../components/ui/Stats/StatsPresets';
 
 const ProcurementAnalyticsPage: React.FC = () => {
-  const { canAccessAnalytics } = useSubscription();
+  const { canAccessAnalytics, subscriptionInfo } = useSubscription();
   const currentTenant = useCurrentTenant();
   const tenantId = currentTenant?.id || '';
 
@@ -31,6 +31,24 @@ const ProcurementAnalyticsPage: React.FC = () => {
   // Check if user has access to advanced analytics (professional/enterprise)
   const hasAdvancedAccess = canAccessAnalytics('advanced');
 
+  // Show loading state while subscription data is being fetched
+  if (subscriptionInfo.loading) {
+    return (
+      <div className="space-y-6">
+        <PageHeader
+          title="Analítica de Compras"
+          description="Insights avanzados sobre planificación de compras y gestión de proveedores"
+        />
+        <Card className="p-8 text-center">
+          <div className="flex flex-col items-center gap-4">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--color-primary)]"></div>
+            <p className="text-[var(--text-secondary)]">Cargando información de suscripción...</p>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
   // If user doesn't have access to advanced analytics, show upgrade message
   if (!hasAdvancedAccess) {
     return (