[Perf] Don not calculate throttled memo during heavy animation

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);
+    return throttle((cb) => cb(), ms, !noFirst);
-  }, [ms]);
+  }, [ms, noFirst]);
 };

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 <R extends any, D extends any[]>(resolverFn: () => R, ms: number, dependencies: D) => {
-  const valueRef = useRef<R>();
+  const runThrottled = useThrottle(ms, true);
-  const runThrottled = useThrottle(ms);
+  const [value, setValue] = useState<R>();
-  const forceUpdate = useForceUpdate();
+  const [isFrozen, freeze, unfreeze] = useFlag();
+
+  useHeavyAnimationCheck(freeze, unfreeze);
 
   useOnChange(() => {
-    let isSync = true;
+    if (isFrozen) {
+      return;
+    }
+
     runThrottled(() => {
-      valueRef.current = resolverFn();
+      setValue(resolverFn());
-
-      if (!isSync) {
-        forceUpdate();
-      }
     });
-    isSync = false;
+  }, dependencies.concat([isFrozen]));
-  }, dependencies);
 
-  return valueRef.current;
+  return value;
 };