diff --git a/src/app.jsx b/src/app.jsx index 8c087cec..d3bb1fce 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,5 +1,6 @@ import './app.css'; +import debounce from 'just-debounce-it'; import { useEffect, useLayoutEffect, @@ -68,6 +69,45 @@ setTimeout(() => { } }, 5000); +(() => { + window.__IDLE__ = false; + const nonIdleEvents = [ + 'mousemove', + 'mousedown', + 'resize', + 'keydown', + 'touchstart', + 'pointerdown', + 'pointermove', + 'wheel', + ]; + const IDLE_TIME = 5_000; // 5 seconds + const setIdle = debounce(() => { + window.__IDLE__ = true; + }, IDLE_TIME); + const onNonIdle = () => { + window.__IDLE__ = false; + setIdle(); + }; + nonIdleEvents.forEach((event) => { + window.addEventListener(event, onNonIdle, { + passive: true, + capture: true, + }); + }); + // document.addEventListener( + // 'visibilitychange', + // () => { + // if (document.visibilityState === 'visible') { + // onNonIdle(); + // } + // }, + // { + // passive: true, + // }, + // ); +})(); + function App() { const snapStates = useSnapshot(states); const [isLoggedIn, setIsLoggedIn] = useState(false); diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index 0f812a6d..bce21324 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -1,4 +1,3 @@ -import { useIdle } from '@uidotdev/usehooks'; import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; import { useHotkeys } from 'react-hotkeys-hook'; import { InView } from 'react-intersection-observer'; @@ -211,21 +210,19 @@ function Timeline({ } }, [nearReachEnd, showMore]); - const idle = useIdle(5000); - console.debug('🧘‍♀️ IDLE', idle); const loadOrCheckUpdates = useCallback( - async ({ disableHoverCheck = false } = {}) => { + async ({ disableIdleCheck = false } = {}) => { console.log('✨ Load or check updates', { autoRefresh: snapStates.settings.autoRefresh, scrollTop: scrollableRef.current.scrollTop, - disableHoverCheck, - idle, + disableIdleCheck, + idle: window.__IDLE__, inBackground: inBackground(), }); if ( snapStates.settings.autoRefresh && scrollableRef.current.scrollTop === 0 && - (disableHoverCheck || idle) && + (disableIdleCheck || window.__IDLE__) && !inBackground() ) { console.log('✨ Load updates', snapStates.settings.autoRefresh); @@ -239,7 +236,7 @@ function Timeline({ } } }, - [id, idle, loadItems, checkForUpdates, snapStates.settings.autoRefresh], + [id, loadItems, checkForUpdates, snapStates.settings.autoRefresh], ); const lastHiddenTime = useRef(); @@ -249,7 +246,7 @@ function Timeline({ const timeDiff = Date.now() - lastHiddenTime.current; if (!lastHiddenTime.current || timeDiff > 1000 * 60) { loadOrCheckUpdates({ - disableHoverCheck: true, + disableIdleCheck: true, }); } } else { diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx index 2a6f8517..53a5d47f 100644 --- a/src/pages/notifications.jsx +++ b/src/pages/notifications.jsx @@ -1,6 +1,5 @@ import './notifications.css'; -import { useIdle } from '@uidotdev/usehooks'; import { memo } from 'preact/compat'; import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; import { useSearchParams } from 'react-router-dom'; @@ -172,8 +171,6 @@ function Notifications({ columnMode }) { } }, [nearReachEnd, showMore]); - const idle = useIdle(5000); - console.debug('🧘‍♀️ IDLE', idle); const loadUpdates = useCallback(() => { console.log('✨ Load updates', { autoRefresh: snapStates.settings.autoRefresh, @@ -185,7 +182,7 @@ function Notifications({ columnMode }) { if ( snapStates.settings.autoRefresh && scrollableRef.current?.scrollTop === 0 && - idle && + window.__IDLE__ && !inBackground() && snapStates.notificationsShowNew && uiState !== 'loading' @@ -193,7 +190,6 @@ function Notifications({ columnMode }) { loadNotifications(true); } }, [ - idle, snapStates.notificationsShowNew, snapStates.settings.autoRefresh, uiState,