Try useIdle

This commit is contained in:
Lim Chee Aun 2023-07-12 17:32:05 +08:00
parent e26473f607
commit fa21eec06a
2 changed files with 17 additions and 4 deletions

View file

@ -1,3 +1,4 @@
import { useIdle } from '@uidotdev/usehooks';
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { InView } from 'react-intersection-observer'; import { InView } from 'react-intersection-observer';
@ -205,13 +206,21 @@ function Timeline({
}, [nearReachEnd, showMore]); }, [nearReachEnd, showMore]);
const isHovering = useRef(false); const isHovering = useRef(false);
const idle = useIdle(5000);
console.debug('🧘‍♀️ IDLE', idle);
const loadOrCheckUpdates = useCallback( const loadOrCheckUpdates = useCallback(
async ({ disableHoverCheck = false } = {}) => { async ({ disableHoverCheck = false } = {}) => {
console.log('✨ Load or check updates', snapStates.settings.autoRefresh); console.log('✨ Load or check updates', {
autoRefresh: snapStates.settings.autoRefresh,
scrollTop: scrollableRef.current.scrollTop,
disableHoverCheck,
idle,
inBackground: inBackground(),
});
if ( if (
snapStates.settings.autoRefresh && snapStates.settings.autoRefresh &&
scrollableRef.current.scrollTop === 0 && scrollableRef.current.scrollTop === 0 &&
(disableHoverCheck || !isHovering.current) && (disableHoverCheck || idle) &&
!inBackground() !inBackground()
) { ) {
console.log('✨ Load updates', snapStates.settings.autoRefresh); console.log('✨ Load updates', snapStates.settings.autoRefresh);
@ -225,7 +234,7 @@ function Timeline({
} }
} }
}, },
[id, loadItems, checkForUpdates, snapStates.settings.autoRefresh], [id, idle, loadItems, checkForUpdates, snapStates.settings.autoRefresh],
); );
const lastHiddenTime = useRef(); const lastHiddenTime = useRef();

View file

@ -1,5 +1,6 @@
import './notifications.css'; import './notifications.css';
import { useIdle } from '@uidotdev/usehooks';
import { memo } from 'preact/compat'; import { memo } from 'preact/compat';
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
import { useSnapshot } from 'valtio'; import { useSnapshot } from 'valtio';
@ -146,6 +147,8 @@ function Notifications() {
}, [nearReachEnd, showMore]); }, [nearReachEnd, showMore]);
const isHovering = useRef(false); const isHovering = useRef(false);
const idle = useIdle(5000);
console.debug('🧘‍♀️ IDLE', idle);
const loadUpdates = useCallback(() => { const loadUpdates = useCallback(() => {
console.log('✨ Load updates', { console.log('✨ Load updates', {
autoRefresh: snapStates.settings.autoRefresh, autoRefresh: snapStates.settings.autoRefresh,
@ -158,7 +161,7 @@ function Notifications() {
if ( if (
snapStates.settings.autoRefresh && snapStates.settings.autoRefresh &&
scrollableRef.current?.scrollTop === 0 && scrollableRef.current?.scrollTop === 0 &&
!isHovering.current && (!isHovering.current || idle) &&
!inBackground() && !inBackground() &&
snapStates.notificationsShowNew && snapStates.notificationsShowNew &&
uiState !== 'loading' uiState !== 'loading'
@ -166,6 +169,7 @@ function Notifications() {
loadNotifications(true); loadNotifications(true);
} }
}, [ }, [
idle,
snapStates.notificationsShowNew, snapStates.notificationsShowNew,
snapStates.settings.autoRefresh, snapStates.settings.autoRefresh,
uiState, uiState,