Fix moderation queue refresh on tab switch

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 (
     <TooltipProvider>
-      <LocationAutoDetectProvider />
       <BrowserRouter
         future={{
           v7_startTransition: true,
@@ -110,6 +118,7 @@ function AppContent() {
 const App = () => (
   <QueryClientProvider client={queryClient}>
     <AuthProvider>
+      <LocationAutoDetectProvider />
       <AppContent />
     </AuthProvider>
   </QueryClientProvider>

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,6 +213,21 @@ 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') => {
     if (!userRef.current) {
       return;
@@ -223,6 +239,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;