Add caching support for analysis data in AnalysisPage

- Implemented caching utilities to store and retrieve analysis results using localStorage.
- Updated AnalysisPage to utilize cached data for improved loading performance and user experience.
- Added loading state indication for data refresh in the UI.
- Enhanced error handling to display errors only when no cached data is available.

src/app/pages/AnalysisPage.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect } from 'react';
-import { parseCsv, formatError } from '../utils/index.ts';
+import { parseCsv, formatError, getCachedAnalysisData, cacheAnalysisData } from '../utils/index.ts';
 import { CsvRow } from '../types/index.ts';
 import { AnalysisResult } from '../types/analysis.types.ts';
 import { analyzeArgumentsFromCsv, getAnalysisResults } from '../services/analysis.service.ts';
@@ -28,6 +28,7 @@ const AnalysisPage: React.FC = () => {
   // User's historical analysis data
   const [userAnalysisData, setUserAnalysisData] = useState<AnalysisResult[]>([]);
   const [isLoadingStats, setIsLoadingStats] = useState<boolean>(true);
+  const [isRefreshingStats, setIsRefreshingStats] = useState<boolean>(false);
   const [statsError, setStatsError] = useState<string | null>(null);
 
   const fileName = useMemo(
@@ -35,18 +36,35 @@ const AnalysisPage: React.FC = () => {
     [selectedFile]
   );
 
-  // Fetch user's analysis data on mount
+  // Fetch user's analysis data on mount with cache support
   useEffect(() => {
     const fetchUserAnalysis = async () => {
-      setIsLoadingStats(true);
+      // Load cached data immediately
+      const cachedData = getCachedAnalysisData();
+      if (cachedData && cachedData.length > 0) {
+        setUserAnalysisData(cachedData);
+        setIsLoadingStats(false);
+        setIsRefreshingStats(true);
+      } else {
+        setIsLoadingStats(true);
+      }
+
       setStatsError(null);
+
+      // Fetch fresh data in the background
       try {
         const response = await getAnalysisResults(1000, 0);
         setUserAnalysisData(response.results);
+        // Cache the fresh data
+        cacheAnalysisData(response.results);
       } catch (err) {
-        setStatsError(formatError(err));
+        // Only show error if we don't have cached data
+        if (!cachedData || cachedData.length === 0) {
+          setStatsError(formatError(err));
+        }
       } finally {
         setIsLoadingStats(false);
+        setIsRefreshingStats(false);
       }
     };
 
@@ -131,6 +149,8 @@ const AnalysisPage: React.FC = () => {
       // Refresh user analysis data after successful analysis
       const updatedResponse = await getAnalysisResults(1000, 0);
       setUserAnalysisData(updatedResponse.results);
+      // Cache the updated data
+      cacheAnalysisData(updatedResponse.results);
     } catch (err) {
       setError(formatError(err));
     } finally {
@@ -144,12 +164,22 @@ const AnalysisPage: React.FC = () => {
         {/* Statistics Section */}
         <div className="rounded-lg border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-sm">
           <div className="border-b border-slate-200 dark:border-zinc-700 px-6 py-4">
-            <h2 className="text-lg font-semibold text-slate-800 dark:text-white">
-              Your Analysis Statistics
-            </h2>
-            <p className="text-sm text-slate-500 dark:text-zinc-400">
-              Overview of all your analyzed arguments
-            </p>
+            <div className="flex items-center justify-between">
+              <div>
+                <h2 className="text-lg font-semibold text-slate-800 dark:text-white">
+                  Your Analysis Statistics
+                </h2>
+                <p className="text-sm text-slate-500 dark:text-zinc-400">
+                  Overview of all your analyzed arguments
+                </p>
+              </div>
+              {isRefreshingStats && (
+                <div className="flex items-center gap-2 text-xs text-slate-500 dark:text-zinc-400">
+                  <div className="h-3 w-3 animate-spin rounded-full border-2 border-slate-300 dark:border-zinc-600 border-t-blue-600 dark:border-t-blue-500"></div>
+                  <span>Updating...</span>
+                </div>
+              )}
+            </div>
           </div>
 
           {isLoadingStats ? (

src/app/utils/cache.utils.ts

@@ -0,0 +1,72 @@
+/**
+ * Cache utilities for storing and retrieving analysis data
+ */
+
+import type { AnalysisResult } from '../types/analysis.types.ts';
+
+const CACHE_KEY = 'analysis_data_cache';
+const CACHE_TIMESTAMP_KEY = 'analysis_data_cache_timestamp';
+
+type CachedAnalysisData = {
+  results: AnalysisResult[];
+  timestamp: number;
+};
+
+/**
+ * Cache analysis results to localStorage
+ */
+export function cacheAnalysisData(results: AnalysisResult[]): void {
+  try {
+    const cacheData: CachedAnalysisData = {
+      results,
+      timestamp: Date.now(),
+    };
+    localStorage.setItem(CACHE_KEY, JSON.stringify(cacheData));
+    localStorage.setItem(CACHE_TIMESTAMP_KEY, String(cacheData.timestamp));
+  } catch (error) {
+    // Silently fail if localStorage is not available or quota exceeded
+    console.warn('Failed to cache analysis data:', error);
+  }
+}
+
+/**
+ * Get cached analysis results from localStorage
+ */
+export function getCachedAnalysisData(): AnalysisResult[] | null {
+  try {
+    const cached = localStorage.getItem(CACHE_KEY);
+    if (!cached) return null;
+
+    const cacheData: CachedAnalysisData = JSON.parse(cached);
+    return cacheData.results;
+  } catch (error) {
+    // Silently fail if localStorage is not available or data is corrupted
+    console.warn('Failed to retrieve cached analysis data:', error);
+    return null;
+  }
+}
+
+/**
+ * Get cache timestamp
+ */
+export function getCacheTimestamp(): number | null {
+  try {
+    const timestamp = localStorage.getItem(CACHE_TIMESTAMP_KEY);
+    return timestamp ? Number(timestamp) : null;
+  } catch (error) {
+    return null;
+  }
+}
+
+/**
+ * Clear cached analysis data
+ */
+export function clearAnalysisCache(): void {
+  try {
+    localStorage.removeItem(CACHE_KEY);
+    localStorage.removeItem(CACHE_TIMESTAMP_KEY);
+  } catch (error) {
+    console.warn('Failed to clear analysis cache:', error);
+  }
+}
+

src/app/utils/index.ts

@@ -10,6 +10,9 @@ export * from './user.utils.ts';
 // Export analysis utilities
 export * from './analysis.utils.ts';
 
+// Export cache utilities
+export * from './cache.utils.ts';
+
 /**
  * Debounce function - delays execution until after wait time
  */