diff --git a/src/global/cache.ts b/src/global/cache.ts index 58e782a9c..c7183555a 100644 --- a/src/global/cache.ts +++ b/src/global/cache.ts @@ -28,7 +28,7 @@ import { compact, pick, pickTruthy, unique, } from '../util/iteratees'; import { encryptSession } from '../util/passcode'; -import { onBeforeUnload, onIdle, throttle } from '../util/schedulers'; +import { onBeforeUnload, throttle } from '../util/schedulers'; import { hasStoredSession } from '../util/sessions'; import { isUserId } from './helpers'; import { addActionHandler, getGlobal } from './index'; @@ -44,11 +44,11 @@ import { } from './selectors'; import { getIsMobile } from '../hooks/useAppLayout'; -import { isHeavyAnimating } from '../hooks/useHeavyAnimationCheck'; +import { isHeavyAnimating, onFullyIdle } from '../hooks/useHeavyAnimationCheck'; const UPDATE_THROTTLE = 5000; -const updateCacheThrottled = throttle(() => onIdle(() => updateCache()), UPDATE_THROTTLE, false); +const updateCacheThrottled = throttle(() => onFullyIdle(() => updateCache()), UPDATE_THROTTLE, false); const updateCacheForced = () => updateCache(true); let isCaching = false; diff --git a/src/hooks/useHeavyAnimationCheck.ts b/src/hooks/useHeavyAnimationCheck.ts index 7a54172f5..a64c4d0c4 100644 --- a/src/hooks/useHeavyAnimationCheck.ts +++ b/src/hooks/useHeavyAnimationCheck.ts @@ -2,7 +2,10 @@ import { useCallback, useEffect, useMemo, useRef, } from '../lib/teact/teact'; +import { requestMeasure } from '../lib/fasterdom/fasterdom'; import { createCallbackManager } from '../util/callbacks'; +import { onIdle } from '../util/schedulers'; +import { createSignal } from '../util/signals'; import useLastCallback from './useLastCallback'; // Make sure to end even if end callback was not called (which was some hardly-reproducible bug) @@ -12,13 +15,16 @@ const startCallbacks = createCallbackManager(); const endCallbacks = createCallbackManager(); let timeout: number | undefined; -let isAnimating = false; -const useHeavyAnimationCheck = ( +const [getIsAnimating, setIsAnimating] = createSignal(false); + +export const getIsHeavyAnimating = getIsAnimating; + +export default function useHeavyAnimationCheck( onStart?: AnyToVoidFunction, onEnd?: AnyToVoidFunction, isDisabled = false, -) => { +) { const lastOnStart = useLastCallback(onStart); const lastOnEnd = useLastCallback(onEnd); @@ -27,7 +33,7 @@ const useHeavyAnimationCheck = ( return undefined; } - if (isAnimating) { + if (getIsAnimating()) { lastOnStart(); } @@ -39,8 +45,9 @@ const useHeavyAnimationCheck = ( startCallbacks.removeCallback(lastOnStart); }; }, [isDisabled, lastOnEnd, lastOnStart]); -}; +} +// TODO → `onFullyIdle`? export function useThrottleForHeavyAnimation(afterHeavyAnimation: T, deps: unknown[]) { // eslint-disable-next-line react-hooks-static-deps/exhaustive-deps const fnMemo = useCallback(afterHeavyAnimation, deps); @@ -50,7 +57,7 @@ export function useThrottleForHeavyAnimation(afterH return useMemo(() => { return (...args: Parameters) => { if (!isScheduledRef.current) { - if (!isAnimating) { + if (!getIsAnimating()) { fnMemo(...args); return; } @@ -68,12 +75,12 @@ export function useThrottleForHeavyAnimation(afterH } export function isHeavyAnimating() { - return isAnimating; + return getIsAnimating(); } export function dispatchHeavyAnimationEvent(duration = AUTO_END_TIMEOUT) { - if (!isAnimating) { - isAnimating = true; + if (!getIsAnimating()) { + setIsAnimating(true); startCallbacks.runCallbacks(); } @@ -89,7 +96,7 @@ export function dispatchHeavyAnimationEvent(duration = AUTO_END_TIMEOUT) { timeout = undefined; } - isAnimating = false; + setIsAnimating(false); endCallbacks.runCallbacks(); } @@ -98,4 +105,14 @@ export function dispatchHeavyAnimationEvent(duration = AUTO_END_TIMEOUT) { return onEnd; } -export default useHeavyAnimationCheck; +export function onFullyIdle(cb: NoneToVoidFunction, idleTimeout?: number) { + onIdle(() => { + if (getIsAnimating()) { + requestMeasure(() => { + onFullyIdle(cb, idleTimeout); + }); + } else { + cb(); + } + }, idleTimeout); +} diff --git a/src/util/folderManager.ts b/src/util/folderManager.ts index ef2fa456c..ff5120435 100644 --- a/src/util/folderManager.ts +++ b/src/util/folderManager.ts @@ -21,7 +21,9 @@ import { import arePropsShallowEqual from './arePropsShallowEqual'; import { createCallbackManager } from './callbacks'; import { areSortedArraysEqual, unique } from './iteratees'; -import { onIdle, throttle } from './schedulers'; +import { throttle } from './schedulers'; + +import { onFullyIdle } from '../hooks/useHeavyAnimationCheck'; interface FolderSummary { id: number; @@ -112,7 +114,7 @@ if (DEBUG) { } const updateFolderManagerThrottled = throttle(() => { - onIdle(() => { + onFullyIdle(() => { updateFolderManager(getGlobal()); }); }, UPDATE_THROTTLE);