Add stale refresh indicator

src/pages/Rfm.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
 import { ChevronLeft, ChevronRight, Download, Filter, Search, Users } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
+import RefreshStatus from '../components/RefreshStatus';
 import { exportToCSV, fetchRfmAnalytics, getCachedRfmAnalytics } from '../dataService';
 import type { DateRange, RfmAnalytics, RfmClient, RfmSegment } from '../types';
 
@@ -451,6 +452,7 @@ const Rfm = () => {
     exportToCSV(exportData, `rfv_${new Date().toISOString().split('T')[0]}.csv`);
   };
   const shouldShowSkeleton = isLoading && !analytics;
+  const isRefreshing = isLoading && Boolean(analytics);
 
   return (
     <div className="space-y-6">
@@ -471,10 +473,12 @@ const Rfm = () => {
         </div>
       </div>
 
+      <RefreshStatus isRefreshing={isRefreshing} />
+
       {shouldShowSkeleton ? (
         <RfmSkeleton />
       ) : (
-        <>
+        <div className={isRefreshing ? 'refreshing-content space-y-6' : 'space-y-6'} aria-busy={isRefreshing}>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
         <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
@@ -804,7 +808,7 @@ const Rfm = () => {
           </div>
         </div>
       </section>
-        </>
+        </div>
       )}
     </div>
   );