Reverted to commit db532afcef

src/components/moderation/ModerationQueue.tsx

@@ -130,6 +130,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
   const isMountingRef = useRef(true);
   const initialFetchCompleteRef = useRef(false);
   const FETCH_COOLDOWN_MS = 1000;
+  const isPageVisible = useRef(true);
   
   // Pagination state
   const [currentPage, setCurrentPage] = useState(1);
@@ -212,8 +213,34 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
     }
   }, [loadingState, items.length, hasRenderedOnce]);
 
+  // Track page visibility to prevent tab-switch refreshes
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      const wasHidden = !isPageVisible.current;
+      isPageVisible.current = !document.hidden;
+      
+      if (wasHidden && isPageVisible.current) {
+        console.log('📄 Page became visible - NOT auto-refreshing queue');
+      }
+    };
+    
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+  }, []);
+
   const fetchItems = useCallback(async (entityFilter: EntityFilter = 'all', statusFilter: StatusFilter = 'pending', silent = false, tab: QueueTab = 'mainQueue') => {
+    console.log('🔍 fetchItems called:', { 
+      hasUser: !!userRef.current, 
+      entityFilter, 
+      statusFilter, 
+      silent, 
+      tab,
+      loadingState,
+      timestamp: new Date().toISOString()
+    });
+    
     if (!userRef.current) {
+      console.warn('⚠️ fetchItems: No user available yet, cannot fetch');
       return;
     }
 
@@ -223,6 +250,12 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
       return;
     }
 
+    // Skip fetch if triggered during tab visibility change (unless manual refresh)
+    if (!silent && !isPageVisible.current) {
+      console.log('👁️ Skipping fetch while page is hidden');
+      return;
+    }
+
     // Cooldown check - prevent rapid-fire calls
     const now = Date.now();
     const timeSinceLastFetch = now - lastFetchTimeRef.current;
@@ -740,15 +773,28 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
 
   // Initial fetch on mount and filter changes
   useEffect(() => {
-    if (!user) return;
+    console.log('🎯 Initial fetch effect:', { 
+      hasUser: !!user, 
+      loadingState,
+      hasInitialFetchRef: hasInitialFetchRef.current,
+      initialFetchComplete: initialFetchCompleteRef.current,
+      isMounting: isMountingRef.current
+    });
+    
+    if (!user) {
+      console.log('⏳ Waiting for user to be available...');
+      return;
+    }
     
     // Phase 1: Initial fetch (run once)
     if (!hasInitialFetchRef.current) {
+      console.log('✅ Triggering initial fetch');
       hasInitialFetchRef.current = true;
       isMountingRef.current = true;
       
       fetchItems(debouncedEntityFilter, debouncedStatusFilter, false)
         .then(() => {
+          console.log('✅ Initial fetch complete');
           initialFetchCompleteRef.current = true;
           // Wait for DOM to paint before allowing subsequent fetches
           requestAnimationFrame(() => {
@@ -760,6 +806,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
     
     // Phase 2: Filter changes (only after initial fetch completes)
     if (!isMountingRef.current && initialFetchCompleteRef.current) {
+      console.log('🔄 Filter changed, fetching with debounce');
       debouncedFetchItems(debouncedEntityFilter, debouncedStatusFilter, true, activeTab);
     }
   }, [debouncedEntityFilter, debouncedStatusFilter, user, activeTab, fetchItems, debouncedFetchItems]);