Refactor polling to prevent interruptions

src/components/moderation/ReportsQueue.tsx

@@ -47,6 +47,7 @@ export interface ReportsQueueRef {
 export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
   const [reports, setReports] = useState<Report[]>([]);
   const [loading, setLoading] = useState(true);
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
   const [actionLoading, setActionLoading] = useState<string | null>(null);
   const { toast } = useToast();
   const { user } = useAuth();
@@ -58,11 +59,16 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
 
   // Expose refresh method via ref
   useImperativeHandle(ref, () => ({
-    refresh: fetchReports
+    refresh: () => fetchReports(false) // Manual refresh shows loading
   }), []);
 
-  const fetchReports = async () => {
+  const fetchReports = async (silent = false) => {
     try {
+      // Only show loading on initial load
+      if (!silent) {
+        setLoading(true);
+      }
+
       const { data, error } = await supabase
         .from('reports')
         .select(`
@@ -123,29 +129,35 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
         variant: "destructive",
       });
     } finally {
-      setLoading(false);
+      // Only clear loading if it was set
+      if (!silent) {
+        setLoading(false);
+      }
+      if (isInitialLoad) {
+        setIsInitialLoad(false);
+      }
     }
   };
 
   // Initial fetch on mount
   useEffect(() => {
     if (user) {
-      fetchReports();
+      fetchReports(false); // Show loading
     }
   }, [user]);
 
   // Polling for auto-refresh
   useEffect(() => {
-    if (!user || refreshMode !== 'auto') return;
+    if (!user || refreshMode !== 'auto' || isInitialLoad) return;
 
     const interval = setInterval(() => {
-      fetchReports();
+      fetchReports(true); // Silent refresh
     }, pollInterval);
 
     return () => {
       clearInterval(interval);
     };
-  }, [user, refreshMode, pollInterval]);
+  }, [user, refreshMode, pollInterval, isInitialLoad]);
 
   const handleReportAction = async (reportId: string, action: 'reviewed' | 'dismissed') => {
     setActionLoading(reportId);