Smooth analytics page reloads

src/pages/Rfm.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
 import { ChevronLeft, ChevronRight, Download, Filter, Loader2, Search, Users } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
-import { exportToCSV, fetchRfmAnalytics } from '../dataService';
+import { exportToCSV, fetchRfmAnalytics, getCachedRfmAnalytics } from '../dataService';
 import type { DateRange, RfmAnalytics, RfmClient, RfmSegment } from '../types';
 
 const emptyClients: RfmClient[] = [];
@@ -127,17 +127,25 @@ const Rfm = () => {
     setRefreshInterval: (interval: number) => void;
   }>();
 
-  const [analytics, setAnalytics] = useState<RfmAnalytics | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const initialCachedAnalytics = getCachedRfmAnalytics(dateRange);
+  const [analytics, setAnalytics] = useState<RfmAnalytics | null>(initialCachedAnalytics || null);
+  const [isLoading, setIsLoading] = useState(!initialCachedAnalytics);
   const [searchTerm, setSearchTerm] = useState('');
   const [segmentFilter, setSegmentFilter] = useState('all');
   const [selectedSegmentKey, setSelectedSegmentKey] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(20);
 
-  const loadRfm = useCallback(async (range: DateRange) => {
+  const loadRfm = useCallback(async (range: DateRange, options?: { force?: boolean }) => {
+    const cachedAnalytics = options?.force ? undefined : getCachedRfmAnalytics(range);
+    if (cachedAnalytics) {
+      setAnalytics(cachedAnalytics);
+      setIsLoading(false);
+      return;
+    }
+
     setIsLoading(true);
-    const data = await fetchRfmAnalytics(range);
+    const data = await fetchRfmAnalytics(range, undefined, options);
     setAnalytics(data);
     setIsLoading(false);
   }, []);
@@ -152,7 +160,7 @@ const Rfm = () => {
     if (refreshInterval === 0) return;
 
     const intervalId = setInterval(() => {
-      void loadRfm(dateRange);
+      void loadRfm(dateRange, { force: true });
     }, refreshInterval);
 
     return () => clearInterval(intervalId);
@@ -276,7 +284,7 @@ const Rfm = () => {
             onChange={setDateRange}
             refreshInterval={refreshInterval}
             setRefreshInterval={setRefreshInterval}
-            onManualRefresh={() => void loadRfm(dateRange)}
+            onManualRefresh={() => void loadRfm(dateRange, { force: true })}
           />
         </div>
       </div>