diff --git a/src/App.tsx b/src/App.tsx index 81d82b3f..6b31f62b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -44,12 +44,20 @@ import BlogIndex from "./pages/BlogIndex"; import BlogPost from "./pages/BlogPost"; import AdminBlog from "./pages/AdminBlog"; -const queryClient = new QueryClient(); +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, // Don't refetch when switching back to tab + refetchOnMount: true, // Still refetch on component mount + refetchOnReconnect: true, // Refetch when internet reconnects + staleTime: 60000, // Consider data fresh for 60 seconds + }, + }, +}); function AppContent() { return ( - ( + diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx index 86472fcb..7912181f 100644 --- a/src/components/moderation/ModerationQueue.tsx +++ b/src/components/moderation/ModerationQueue.tsx @@ -130,6 +130,7 @@ export const ModerationQueue = forwardRef((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,6 +213,21 @@ export const ModerationQueue = forwardRef((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') => { if (!userRef.current) { return; @@ -223,6 +239,12 @@ export const ModerationQueue = forwardRef((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;