diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx index d2e41f00..0bdb302f 100644 --- a/src/components/moderation/ModerationQueue.tsx +++ b/src/components/moderation/ModerationQueue.tsx @@ -1,4 +1,4 @@ -import { useState, useImperativeHandle, forwardRef } from 'react'; +import { useState, useImperativeHandle, forwardRef, useMemo } from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { useToast } from '@/hooks/use-toast'; import { useUserRole } from '@/hooks/useUserRole'; @@ -28,20 +28,30 @@ export const ModerationQueue = forwardRef((props, ref) => { const { isAdmin, isSuperuser } = useUserRole(); const adminSettings = useAdminSettings(); + // Memoize settings to prevent unnecessary effect re-runs + const settings = useMemo(() => ({ + refreshMode: adminSettings.getAdminPanelRefreshMode(), + pollInterval: adminSettings.getAdminPanelPollInterval(), + refreshStrategy: adminSettings.getAutoRefreshStrategy(), + preserveInteraction: adminSettings.getPreserveInteractionState(), + useRealtimeQueue: adminSettings.getUseRealtimeQueue(), + refreshOnTabVisible: adminSettings.getRefreshOnTabVisible(), + }), [ + adminSettings.getAdminPanelRefreshMode(), + adminSettings.getAdminPanelPollInterval(), + adminSettings.getAutoRefreshStrategy(), + adminSettings.getPreserveInteractionState(), + adminSettings.getUseRealtimeQueue(), + adminSettings.getRefreshOnTabVisible(), + ]); + // Initialize queue manager (replaces all state management, fetchItems, effects) const queueManager = useModerationQueueManager({ user, isAdmin: isAdmin(), isSuperuser: isSuperuser(), toast, - settings: { - refreshMode: adminSettings.getAdminPanelRefreshMode(), - pollInterval: adminSettings.getAdminPanelPollInterval(), - refreshStrategy: adminSettings.getAutoRefreshStrategy(), - preserveInteraction: adminSettings.getPreserveInteractionState(), - useRealtimeQueue: adminSettings.getUseRealtimeQueue(), - refreshOnTabVisible: adminSettings.getRefreshOnTabVisible(), - } + settings, }); // UI-only state diff --git a/src/hooks/moderation/useModerationQueueManager.ts b/src/hooks/moderation/useModerationQueueManager.ts index 42ac071c..78024997 100644 --- a/src/hooks/moderation/useModerationQueueManager.ts +++ b/src/hooks/moderation/useModerationQueueManager.ts @@ -794,13 +794,23 @@ export function useModerationQueueManager( // Visibility change handler useEffect(() => { + console.log('🔍 Visibility effect running - refreshOnTabVisible:', settings.refreshOnTabVisible); + // Early return if feature is disabled if (!settings.refreshOnTabVisible) { console.log('⚙️ refreshOnTabVisible is DISABLED - no listener attached'); return; } + console.log('✅ refreshOnTabVisible is ENABLED - attaching listener'); + const handleVisibilityChange = () => { + // Double-check setting before doing anything (defensive check) + if (!settings.refreshOnTabVisible) { + console.log('⚠️ Visibility handler called but setting is disabled - ignoring'); + return; + } + if (document.hidden) { console.log('📴 Tab hidden - pausing queue updates'); pauseFetchingRef.current = true;