Update BuyerOrderInfo.tsx

components/dashboard/BuyerOrderInfo.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
-import { Package, ShoppingBag, Info, ExternalLink } from "lucide-react";
+import { Package, ShoppingBag, Info, ExternalLink, Loader2 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -35,73 +35,138 @@ interface BuyerOrderInfoProps {
 
 export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps) {
   const router = useRouter();
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [orders, setOrders] = useState<Order[]>([]);
+  const [hasOrders, setHasOrders] = useState<boolean | null>(null);
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+  const lastFetchedRef = useRef<number>(0);
+  const isFetchingRef = useRef<boolean>(false);
+  const tooltipDelayRef = useRef<NodeJS.Timeout | null>(null);
   
-  useEffect(() => {
+  // Fetch data without unnecessary dependencies to reduce render cycles
-    // Only load if we have a chatId
+  const fetchBuyerOrders = useCallback(async (force = false) => {
+    // Prevent multiple simultaneous fetches
+    if (isFetchingRef.current) return;
+    
+    // Don't fetch if we already know there are no orders
+    if (hasOrders === false && !force) return;
+    
+    // Don't fetch if we already have orders and data was fetched less than 10 seconds ago
+    const now = Date.now();
+    if (!force && orders.length > 0 && now - lastFetchedRef.current < 10000) return;
+    
+    // Only continue if we have a chatId
     if (!chatId) return;
     
-    const fetchBuyerOrders = async () => {
+    isFetchingRef.current = true;
-      try {
+    setLoading(true);
-        const authToken = getCookie("Authorization");
+    
-        
+    try {
-        if (!authToken) return;
+      const authToken = getCookie("Authorization");
-        
+      
-        const authAxios = axios.create({
+      if (!authToken) {
-          baseURL: process.env.NEXT_PUBLIC_API_URL,
+        isFetchingRef.current = false;
-          headers: {
+        setLoading(false);
-            Authorization: `Bearer ${authToken}`
+        return;
-          }
+      }
-        });
+      
-        
+      const authAxios = axios.create({
-        // Use the new endpoint that works with sub-users
+        baseURL: process.env.NEXT_PUBLIC_API_URL,
-        const response = await authAxios.get(`/chats/${chatId}/orders?limit=250`);
+        headers: {
-        
+          Authorization: `Bearer ${authToken}`
-        if (response.data && response.data.orders) {
-          setOrders(response.data.orders);
         }
-        
+      });
-        setLoading(false);
+      
-      } catch (error) {
+      // Use the new endpoint that works with sub-users
-        console.error("Error fetching buyer orders:", error);
+      const response = await authAxios.get(`/chats/${chatId}/orders?limit=10`); // Limit to fewer orders for faster response
-        setLoading(false);
+      
+      if (response.data && response.data.orders) {
+        setOrders(response.data.orders);
+        setHasOrders(response.data.orders.length > 0);
+      } else {
+        setHasOrders(false);
+      }
+      
+      lastFetchedRef.current = Date.now();
+    } catch (error) {
+      console.error("Error fetching buyer orders:", error);
+      setHasOrders(false);
+    } finally {
+      setLoading(false);
+      isFetchingRef.current = false;
+    }
+  }, [chatId]); // Minimize dependencies even further
+  
+  // Start fetching immediately when component mounts
+  useEffect(() => {
+    if (chatId) {
+      // Immediately attempt to fetch in the background
+      fetchBuyerOrders();
+    }
+    
+    return () => {
+      // Clean up any pending timeouts
+      if (tooltipDelayRef.current) {
+        clearTimeout(tooltipDelayRef.current);
       }
     };
-    
+  }, [chatId, fetchBuyerOrders]);
-    fetchBuyerOrders();
-  }, [chatId]);
   
   const handleViewOrder = (orderId: string) => {
     router.push(`/dashboard/orders/${orderId}`);
   };
   
+  // Handle hover with immediate tooltip opening
+  const handleButtonMouseEnter = () => {
+    // Start fetching data, but don't wait for it to complete
+    if (!isFetchingRef.current) {
+      queueMicrotask(() => {
+        fetchBuyerOrders();
+      });
+    }
+  };
+  
+  // Handle tooltip state change
+  const handleTooltipOpenChange = (open: boolean) => {
+    setIsTooltipOpen(open);
+    if (open && !isFetchingRef.current) {
+      queueMicrotask(() => {
+        fetchBuyerOrders();
+      });
+    }
+  };
+  
   // Format the price as currency
   const formatPrice = (price: number) => {
     return `£${price.toFixed(2)}`;
   };
   
-  // Don't show anything while loading or if no orders
+  // If we know there are no orders, don't show the component at all
-  if (loading || orders.length === 0) {
+  if (hasOrders === false) {
     return null;
   }
   
-  // Count products across all orders
+  // Precompute product count for button display (only if we have orders)
-  const productCount = orders.reduce((total, order) => {
+  const productCount = orders.length > 0 
-    return total + order.products.reduce((sum, product) => sum + product.quantity, 0);
+    ? orders.reduce((total, order) => {
-  }, 0);
+        return total + order.products.reduce((sum, product) => sum + product.quantity, 0);
+      }, 0)
+    : 0;
   
   return (
     <TooltipProvider>
-      <Tooltip>
+      <Tooltip onOpenChange={handleTooltipOpenChange}>
         <TooltipTrigger asChild>
           <Button 
             variant="outline" 
             size="sm" 
             className="ml-2 flex items-center gap-1.5"
+            onMouseEnter={handleButtonMouseEnter}
           >
             <ShoppingBag className="h-4 w-4" />
-            <span className="text-xs font-medium">{orders.length} Orders</span>
+            <span className="text-xs font-medium">
+              {orders.length > 0 ? `${orders.length} Orders` : "Orders"}
+            </span>
             {productCount > 0 && (
               <Badge variant="secondary" className="text-[10px] px-1.5 py-0 ml-1">
                 {productCount} items
@@ -109,46 +174,67 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
             )}
           </Button>
         </TooltipTrigger>
-        <TooltipContent side="bottom" align="start" className="w-80 p-0" sideOffset={10}>
+        <TooltipContent 
+          side="bottom" 
+          align="start" 
+          className="w-80 p-0" 
+          sideOffset={10}
+        >
           <div className="py-2">
             <div className="px-3 py-2 text-xs font-medium border-b flex justify-between items-center">
               <span>Recent Orders from this Customer</span>
               <Info className="h-3.5 w-3.5 text-muted-foreground" />
             </div>
-            <div className="max-h-64 overflow-y-auto divide-y divide-border">
+            
-              {orders.map((order) => (
+            {loading ? (
-                <div 
+              // Show loading state
-                  key={order._id} 
+              <div className="p-4 flex justify-center items-center">
-                  className="px-3 py-2 hover:bg-accent/50 cursor-pointer"
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-                  onClick={() => handleViewOrder(order._id)}
+                <span className="ml-2 text-sm text-muted-foreground">Loading orders...</span>
-                >
+              </div>
-                  <div className="flex items-center justify-between mb-1">
+            ) : orders.length === 0 ? (
-                    <div className="flex items-center gap-2">
+              // Show no orders state
-                      <Package className="h-3.5 w-3.5" />
+              <div className="p-4 text-center text-sm text-muted-foreground">
-                      <span className="text-xs font-medium">Order #{order.orderId}</span>
+                No orders found for this customer
+              </div>
+            ) : (
+              // Show orders
+              <div className="max-h-64 overflow-y-auto divide-y divide-border">
+                {orders.map((order) => (
+                  <div 
+                    key={order._id} 
+                    className="px-3 py-2 hover:bg-accent/50 cursor-pointer"
+                    onClick={() => handleViewOrder(order._id)}
+                  >
+                    <div className="flex items-center justify-between mb-1">
+                      <div className="flex items-center gap-2">
+                        <Package className="h-3.5 w-3.5" />
+                        <span className="text-xs font-medium">Order #{order.orderId}</span>
+                      </div>
+                      <Badge variant={
+                        order.status === "paid" ? "paid" : 
+                        order.status === "unpaid" ? "unpaid" :
+                        order.status === "shipped" ? "shipped" :
+                        order.status === "completed" ? "completed" :
+                        "secondary"
+                      } className="text-[10px] h-5 px-1.5">
+                        {order.status.toUpperCase()}
+                      </Badge>
                     </div>
-                    <Badge variant={
+                    
-                      order.status === "paid" ? "paid" : 
+                    <div className="flex justify-between items-center text-xs text-muted-foreground pl-5">
-                      order.status === "unpaid" ? "unpaid" :
+                      <div className="flex gap-1">
-                      order.status === "shipped" ? "shipped" :
+                        <span>{order.products.length} {order.products.length === 1 ? 'product' : 'products'}</span>
-                      order.status === "completed" ? "completed" :
+                        <span>·</span>
-                      "secondary"
+                        <span>{formatPrice(order.totalPrice)}</span>
-                    } className="text-[10px] h-5 px-1.5">
+                      </div>
-                      {order.status.toUpperCase()}
+                      <span className="text-[10px]">{new Date(order.orderDate).toLocaleDateString()}</span>
-                    </Badge>
-                  </div>
-                  
-                  <div className="flex justify-between items-center text-xs text-muted-foreground pl-5">
-                    <div className="flex gap-1">
-                      <span>{order.products.length} {order.products.length === 1 ? 'product' : 'products'}</span>
-                      <span>·</span>
-                      <span>{formatPrice(order.totalPrice)}</span>
                     </div>
-                    <span className="text-[10px]">{new Date(order.orderDate).toLocaleDateString()}</span>
                   </div>
-                </div>
+                ))}
-              ))}
+              </div>
-            </div>
+            )}
+            
             <div className="border-t px-3 py-2">
               <Button 
                 variant="ghost"