Fix admin dashboard auto-refresh

src/components/moderation/RecentActivity.tsx

@@ -5,6 +5,8 @@ import { useToast } from '@/hooks/use-toast';
 import { ActivityCard } from './ActivityCard';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Activity as ActivityIcon } from 'lucide-react';
+import { smartMergeArray } from '@/lib/smartStateUpdate';
+import { useAdminSettings } from '@/hooks/useAdminSettings';
 
 interface ActivityItem {
   id: string;
@@ -28,18 +30,25 @@ export interface RecentActivityRef {
 export const RecentActivity = forwardRef<RecentActivityRef>((props, ref) => {
   const [activities, setActivities] = useState<ActivityItem[]>([]);
   const [loading, setLoading] = useState(true);
+  const [isSilentRefresh, setIsSilentRefresh] = useState(false);
   const { user } = useAuth();
   const { toast } = useToast();
+  const { getAutoRefreshStrategy } = useAdminSettings();
+  const refreshStrategy = getAutoRefreshStrategy();
 
   useImperativeHandle(ref, () => ({
-    refresh: fetchRecentActivity
+    refresh: () => fetchRecentActivity(false)
   }));
 
-  const fetchRecentActivity = async () => {
+  const fetchRecentActivity = async (silent = false) => {
     if (!user) return;
 
     try {
-      setLoading(true);
+      if (!silent) {
+        setLoading(true);
+      } else {
+        setIsSilentRefresh(true);
+      }
 
       // Fetch recent approved/rejected submissions
       const { data: submissions, error: submissionsError } = await supabase
@@ -124,7 +133,23 @@ export const RecentActivity = forwardRef<RecentActivityRef>((props, ref) => {
         new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
       );
 
-      setActivities(allActivities.slice(0, 20)); // Keep top 20 most recent
+      const recentActivities = allActivities.slice(0, 20); // Keep top 20 most recent
+
+      // Use smart merging for silent refreshes if strategy is 'merge'
+      if (silent && refreshStrategy === 'merge') {
+        const mergeResult = smartMergeArray(activities, recentActivities, {
+          compareFields: ['timestamp', 'action'],
+          preserveOrder: false,
+          addToTop: true,
+        });
+
+        if (mergeResult.hasChanges) {
+          setActivities(mergeResult.items);
+        }
+      } else {
+        // Full replacement for non-silent refreshes or 'replace' strategy
+        setActivities(recentActivities);
+      }
     } catch (error: any) {
       console.error('Error fetching recent activity:', error);
       toast({
@@ -133,12 +158,15 @@ export const RecentActivity = forwardRef<RecentActivityRef>((props, ref) => {
         variant: "destructive",
       });
     } finally {
-      setLoading(false);
+      if (!silent) {
+        setLoading(false);
+      }
+      setIsSilentRefresh(false);
     }
   };
 
   useEffect(() => {
-    fetchRecentActivity();
+    fetchRecentActivity(false);
   }, [user]);
 
   if (loading) {