perf: load dashboard metrics from analytics API

src/components/Layout.tsx

@@ -6,6 +6,7 @@ import { fetchData, fetchStock, logout } from '../dataService';
 
 const Layout = () => {
   const location = useLocation();
+  const needsRawData = location.pathname.startsWith('/products') || location.pathname.startsWith('/clients');
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() => {
     return localStorage.getItem('graph_sidebar_collapsed') === 'true';
   });
@@ -26,7 +27,7 @@ const Layout = () => {
 
   const [ordersData, setOrdersData] = useState<OrderData[]>([]);
   const [stockData, setStockData] = useState<StockData[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(needsRawData);
   const [refreshInterval, setRefreshInterval] = useState<number>(() => {
     const saved = localStorage.getItem('nexstar_refresh_interval');
     return saved ? Number(saved) : 0;
@@ -44,20 +45,22 @@ const Layout = () => {
   }, []);
 
   useEffect(() => {
-    // The dashboard fetches its initial server state after mount without blocking route render.
+    if (!needsRawData) return;
+
+    // Product and client pages still depend on raw orders until their API migration is complete.
     // eslint-disable-next-line react-hooks/set-state-in-effect
-    void loadData(false).finally(() => setIsLoading(false));
-  }, [loadData]);
+    void loadData(true);
+  }, [loadData, needsRawData]);
 
   useEffect(() => {
-    if (refreshInterval === 0) return;
+    if (refreshInterval === 0 || !needsRawData) return;
     
     const intervalId = setInterval(() => {
       loadData(false);
     }, refreshInterval);
 
     return () => clearInterval(intervalId);
-  }, [loadData, refreshInterval]);
+  }, [loadData, needsRawData, refreshInterval]);
 
   useEffect(() => {
     localStorage.setItem('nexstar_refresh_interval', refreshInterval.toString());
@@ -149,13 +152,13 @@ const Layout = () => {
 
         {/* Content Area */}
         <div className="flex-1 overflow-y-auto p-8 relative">
-          {isLoading && (
+          {needsRawData && isLoading && (
             <div className="absolute right-8 top-8 z-10 flex items-center gap-2 rounded-xl border border-dark-border bg-dark-card px-3 py-2 text-sm font-semibold text-dark-muted shadow-sm">
               <Loader2 className="h-4 w-4 animate-spin text-brand-primary" />
               Atualizando dados
             </div>
           )}
-          <Outlet context={{ dateRange, setDateRange, ordersData, stockData, isDataLoading: isLoading, refreshInterval, setRefreshInterval, loadData }} />
+          <Outlet context={{ dateRange, setDateRange, ordersData, stockData, isDataLoading: needsRawData && isLoading, refreshInterval, setRefreshInterval, loadData }} />
         </div>
       </main>
     </div>