Add stale refresh indicator

src/pages/ProductDetails.tsx

@@ -3,6 +3,7 @@ import { useParams, Link, useOutletContext } from 'react-router-dom';
 import { ArrowLeft, Package, DollarSign } from 'lucide-react';
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import DateRangePicker from '../components/DateRangePicker';
+import RefreshStatus from '../components/RefreshStatus';
 import type { DateRange, ProductDetailsAnalytics } from '../types';
 import { fetchProductDetailsAnalytics } from '../dataService';
 
@@ -110,7 +111,7 @@ const ProductDetails = () => {
     return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
   };
 
-  if (isLoading) {
+  if (isLoading && !details) {
     return <ProductDetailsSkeleton />;
   }
 
@@ -124,6 +125,7 @@ const ProductDetails = () => {
   }
 
   const { productInfo, chartData, totalSold, totalRevenue } = details;
+  const isRefreshing = isLoading && Boolean(details);
 
   return (
     <div className="space-y-6">
@@ -150,6 +152,9 @@ const ProductDetails = () => {
           onChange={setDateRange} 
         />      </div>
 
+      <RefreshStatus isRefreshing={isRefreshing} />
+
+      <div className={isRefreshing ? 'refreshing-content space-y-6' : 'space-y-6'} aria-busy={isRefreshing}>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div className="bg-dark-card p-6 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
           <div>
@@ -205,6 +210,7 @@ const ProductDetails = () => {
           </ResponsiveContainer>
         </div>
       </div>
+      </div>
     </div>
   );
 };