diff --git a/src/hooks/useThrottle.ts b/src/hooks/useThrottle.ts index e8251e07b..13715a3e6 100644 --- a/src/hooks/useThrottle.ts +++ b/src/hooks/useThrottle.ts @@ -2,8 +2,8 @@ import { useMemo } from '../lib/teact/teact'; import { throttle } from '../util/schedulers'; -export default (ms: number) => { +export default (ms: number, noFirst = false) => { return useMemo(() => { - return throttle((cb) => cb(), ms); - }, [ms]); + return throttle((cb) => cb(), ms, !noFirst); + }, [ms, noFirst]); }; diff --git a/src/hooks/useThrottledMemo.ts b/src/hooks/useThrottledMemo.ts index 85aaaf76f..78bd8eba0 100644 --- a/src/hooks/useThrottledMemo.ts +++ b/src/hooks/useThrottledMemo.ts @@ -1,25 +1,26 @@ -import { useRef } from '../lib/teact/teact'; +import { useState } from '../lib/teact/teact'; import useThrottle from './useThrottle'; import useOnChange from './useOnChange'; -import useForceUpdate from './useForceUpdate'; +import useHeavyAnimationCheck from './useHeavyAnimationCheck'; +import useFlag from './useFlag'; export default (resolverFn: () => R, ms: number, dependencies: D) => { - const valueRef = useRef(); - const runThrottled = useThrottle(ms); - const forceUpdate = useForceUpdate(); + const runThrottled = useThrottle(ms, true); + const [value, setValue] = useState(); + const [isFrozen, freeze, unfreeze] = useFlag(); + + useHeavyAnimationCheck(freeze, unfreeze); useOnChange(() => { - let isSync = true; + if (isFrozen) { + return; + } + runThrottled(() => { - valueRef.current = resolverFn(); - - if (!isSync) { - forceUpdate(); - } + setValue(resolverFn()); }); - isSync = false; - }, dependencies); + }, dependencies.concat([isFrozen])); - return valueRef.current; + return value; };