diff --git a/src/utils/hooks/useAutoRefreshInterval.ts b/src/utils/hooks/useAutoRefreshInterval.ts index b274805e17..690b392665 100644 --- a/src/utils/hooks/useAutoRefreshInterval.ts +++ b/src/utils/hooks/useAutoRefreshInterval.ts @@ -4,26 +4,49 @@ import {AUTO_REFRESH_INTERVAL} from '../constants'; import {useSetting} from './useSetting'; +const IMMEDIATE_UPDATE_INTERVAL = 1; +const DISABLED_INTERVAL = 0; + export function useAutoRefreshInterval(): [number, (value: number) => void] { - const [settingValue, setSettingValue] = useSetting(AUTO_REFRESH_INTERVAL, 0); + const [settingValue, setSettingValue] = useSetting(AUTO_REFRESH_INTERVAL, DISABLED_INTERVAL); const [effectiveInterval, setEffectiveInterval] = React.useState( - document.visibilityState === 'visible' ? settingValue : 0, + document.visibilityState === 'visible' ? settingValue : DISABLED_INTERVAL, ); + const lastHiddenTimeRef = React.useRef(null); + React.useEffect(() => { - // Update the effective interval when the setting changes setEffectiveInterval(document.visibilityState === 'visible' ? settingValue : 0); - // Handle visibility change events const handleVisibilityChange = () => { - setEffectiveInterval(document.visibilityState === 'visible' ? settingValue : 0); + const isVisible = document.visibilityState === 'visible'; + if (isVisible) { + // If more than settingValue milliseconds have passed since the page was hidden, + // trigger an immediate update + const shouldTriggerImmediate = + lastHiddenTimeRef.current && + settingValue !== DISABLED_INTERVAL && + Date.now() - lastHiddenTimeRef.current >= settingValue; + + if (shouldTriggerImmediate) { + setEffectiveInterval(IMMEDIATE_UPDATE_INTERVAL); + + setTimeout(() => { + setEffectiveInterval(settingValue); + }, 0); + } else { + setEffectiveInterval(settingValue); + } + + lastHiddenTimeRef.current = null; + } else { + lastHiddenTimeRef.current = Date.now(); + setEffectiveInterval(DISABLED_INTERVAL); + } }; document.addEventListener('visibilitychange', handleVisibilityChange); - - return () => { - document.removeEventListener('visibilitychange', handleVisibilityChange); - }; + return () => document.removeEventListener('visibilitychange', handleVisibilityChange); }, [settingValue]); return [effectiveInterval, setSettingValue];