feat: Implement optimistic stats updates

src/hooks/useModerationStats.ts

@@ -38,6 +38,13 @@ export const useModerationStats = (options: UseModerationStatsOptions = {}) => {
     flaggedContent: 0,
   });
   
+  // Optimistic deltas for immediate UI updates
+  const [optimisticDeltas, setOptimisticDeltas] = useState<ModerationStats>({
+    pendingSubmissions: 0,
+    openReports: 0,
+    flaggedContent: 0,
+  });
+  
   const [isLoading, setIsLoading] = useState(true);
   const [isInitialLoad, setIsInitialLoad] = useState(true);
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
@@ -49,6 +56,15 @@ export const useModerationStats = (options: UseModerationStatsOptions = {}) => {
     onStatsChangeRef.current = onStatsChange;
   }, [onStatsChange]);
 
+  // Optimistic update function
+  const optimisticallyUpdateStats = useCallback((delta: Partial<ModerationStats>) => {
+    setOptimisticDeltas(prev => ({
+      pendingSubmissions: (prev.pendingSubmissions || 0) + (delta.pendingSubmissions || 0),
+      openReports: (prev.openReports || 0) + (delta.openReports || 0),
+      flaggedContent: (prev.flaggedContent || 0) + (delta.flaggedContent || 0),
+    }));
+  }, []);
+
   const fetchStats = useCallback(async (silent = false) => {
     if (!enabled) return;
     
@@ -82,6 +98,13 @@ export const useModerationStats = (options: UseModerationStatsOptions = {}) => {
       setStats(newStats);
       setLastUpdated(new Date());
       onStatsChangeRef.current?.(newStats);
+      
+      // Clear optimistic deltas when real data arrives
+      setOptimisticDeltas({
+        pendingSubmissions: 0,
+        openReports: 0,
+        flaggedContent: 0,
+      });
     } catch (error) {
       console.error('Error fetching moderation stats:', error);
     } finally {
@@ -180,9 +203,17 @@ export const useModerationStats = (options: UseModerationStatsOptions = {}) => {
     };
   }, [enabled, pollingEnabled, realtimeEnabled, pollingInterval, fetchStats, isInitialLoad]);
 
+  // Combine real stats with optimistic deltas for display
+  const displayStats = {
+    pendingSubmissions: Math.max(0, stats.pendingSubmissions + optimisticDeltas.pendingSubmissions),
+    openReports: Math.max(0, stats.openReports + optimisticDeltas.openReports),
+    flaggedContent: Math.max(0, stats.flaggedContent + optimisticDeltas.flaggedContent),
+  };
+
   return { 
-    stats, 
+    stats: displayStats, 
     refresh: fetchStats, 
+    optimisticallyUpdateStats,
     isLoading,
     lastUpdated 
   };