Add frontend loading imporvements 2

frontend/src/api/hooks/subscription.ts

@@ -2,7 +2,7 @@
  * Subscription hook for checking plan features and limits
  */
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { subscriptionService } from '../services/subscription';
 import {
@@ -54,13 +54,14 @@ export const useSubscription = () => {
   });
 
   // Derive subscription info from query data or tenant fallback
-  const subscriptionInfo: SubscriptionInfo = {
+  // IMPORTANT: Memoize to prevent infinite re-renders in dependent hooks
+  const subscriptionInfo: SubscriptionInfo = useMemo(() => ({
     plan: usageSummary?.plan || initialPlan,
     status: usageSummary?.status || 'active',
     features: usageSummary?.usage || {},
     loading: isLoading,
     error: error ? 'Failed to load subscription data' : undefined,
-  };
+  }), [usageSummary?.plan, usageSummary?.status, usageSummary?.usage, initialPlan, isLoading, error]);
 
   // Check if user has a specific feature
   const hasFeature = useCallback(async (featureName: string): Promise<SubscriptionFeature> => {