Add stale refresh indicator

src/pages/ClientDetails.tsx

@@ -3,6 +3,7 @@ import { useParams, Link, useOutletContext } from 'react-router-dom';
 import { ArrowLeft, User, Tag, Package, DollarSign, Clock, Phone, ChevronDown, ChevronLeft, ChevronRight, ShoppingBag, ReceiptText } from 'lucide-react';
 import { AreaChart, Area, BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import DateRangePicker from '../components/DateRangePicker';
+import RefreshStatus from '../components/RefreshStatus';
 import type { ClientDetailsAnalytics, DateRange, OrderData } from '../types';
 import { fetchClientDetailsAnalytics } from '../dataService';
 import { formatDisplayName, removeTrailingSellerId } from '../displayFormatters';
@@ -204,7 +205,7 @@ const ClientDetails = () => {
     });
   };
 
-  if (isLoading) {
+  if (isLoading && !details) {
     return <ClientDetailsSkeleton />;
   }
 
@@ -237,6 +238,7 @@ const ClientDetails = () => {
   const paginatedOrders = groupedOrders.slice(startIndex, startIndex + ordersPerPage);
   const hasWeekdayPattern = purchaseWeekdays.some(day => day.value > 0);
   const hasHourPattern = purchaseHours.some(hour => hour.value > 0);
+  const isRefreshing = isLoading && Boolean(details);
 
   return (
     <div className="space-y-6">
@@ -278,6 +280,9 @@ const ClientDetails = () => {
         </div>
       </div>
 
+      <RefreshStatus isRefreshing={isRefreshing} />
+
+      <div className={isRefreshing ? 'refreshing-content space-y-6' : 'space-y-6'} aria-busy={isRefreshing}>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
         <div className="bg-dark-card p-5 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
           <div>
@@ -582,6 +587,7 @@ const ClientDetails = () => {
           </div>
         </div>
       </div>
+      </div>
     </div>
   );
 };