[Perf] Animation: Allow to start immediately

src/util/animation.ts

@@ -16,19 +16,19 @@ export function animateSingle(tick: Function, instance?: AnimationInstance) {
     currentInstance = instance;
   }
 
-  fastRaf(() => {
-    if (!instance!.isCancelled && tick()) {
+  if (!instance!.isCancelled && tick()) {
+    fastRaf(() => {
       animateSingle(tick, instance);
-    }
-  });
+    });
+  }
 }
 
 export function animate(tick: Function) {
-  fastRaf(() => {
-    if (tick()) {
+  if (tick()) {
+    fastRaf(() => {
       animate(tick);
-    }
-  });
+    });
+  }
 }
 
 export type TimingFn = (t: number) => number;

src/util/fastSmoothScroll.ts

@@ -10,6 +10,7 @@ import {
 import { IS_ANDROID } from './environment';
 import { dispatchHeavyAnimationEvent } from '../hooks/useHeavyAnimationCheck';
 import { animateSingle } from './animation';
+import { fastRaf } from './schedulers';
 
 let isAnimating = false;
 
@@ -135,19 +136,21 @@ function scrollWithJs(
   const startAt = Date.now();
   const onHeavyAnimationStop = dispatchHeavyAnimationEvent();
 
-  animateSingle(() => {
-    const t = Math.min((Date.now() - startAt) / duration, 1);
-    const currentPath = path * (1 - transition(t));
+  fastRaf(() => {
+    animateSingle(() => {
+      const t = Math.min((Date.now() - startAt) / duration, 1);
+      const currentPath = path * (1 - transition(t));
 
-    container.scrollTop = Math.round(target - currentPath);
+      container.scrollTop = Math.round(target - currentPath);
 
-    isAnimating = t < 1;
+      isAnimating = t < 1;
 
-    if (!isAnimating) {
-      onHeavyAnimationStop();
-    }
+      if (!isAnimating) {
+        onHeavyAnimationStop();
+      }
 
-    return isAnimating;
+      return isAnimating;
+    });
   });
 }
 

src/util/fastSmoothScrollHorizontal.ts

@@ -2,6 +2,7 @@ import { getGlobal } from '../lib/teact/teactn';
 
 import { ANIMATION_LEVEL_MIN } from '../config';
 import { animate } from './animation';
+import { fastRaf } from './schedulers';
 
 const DEFAULT_DURATION = 300;
 
@@ -39,13 +40,15 @@ function scrollWithJs(container: HTMLElement, left: number, duration: number) {
 
   const startAt = Date.now();
 
-  animate(() => {
-    const t = Math.min((Date.now() - startAt) / duration, 1);
+  fastRaf(() => {
+    animate(() => {
+      const t = Math.min((Date.now() - startAt) / duration, 1);
 
-    const currentPath = path * (1 - transition(t));
-    container.scrollLeft = Math.round(target - currentPath);
+      const currentPath = path * (1 - transition(t));
+      container.scrollLeft = Math.round(target - currentPath);
 
-    return t < 1;
+      return t < 1;
+    });
   });
 }
 

src/util/switchTheme.ts

@@ -1,6 +1,7 @@
 import { ISettings } from '../types';
 
 import { animateSingle } from './animation';
+import { fastRaf } from './schedulers';
 
 import themeColors from '../styles/themes.json';
 
@@ -54,12 +55,14 @@ export default (theme: ISettings['theme'], withAnimation: boolean) => {
   isInitialized = true;
 
   if (shouldAnimate) {
-    animateSingle(() => {
-      const t = Math.min((Date.now() - startAt) / DURATION_MS, 1);
+    fastRaf(() => {
+      animateSingle(() => {
+        const t = Math.min((Date.now() - startAt) / DURATION_MS, 1);
 
-      applyColorAnimationStep(startIndex, endIndex, transition(t));
+        applyColorAnimationStep(startIndex, endIndex, transition(t));
 
-      return t < 1;
+        return t < 1;
+      });
     });
   } else {
     applyColorAnimationStep(startIndex, endIndex);