From 43e4492102936ea5fa1ff1d1fe38595f28b84abb Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Mon, 24 Jan 2022 04:42:05 +0100
Subject: [PATCH] [Perf] Animation: Allow to start immediately

---
 src/util/animation.ts                  | 16 ++++++++--------
 src/util/fastSmoothScroll.ts           | 21 ++++++++++++---------
 src/util/fastSmoothScrollHorizontal.ts | 13 ++++++++-----
 src/util/switchTheme.ts                | 11 +++++++----
 4 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/util/animation.ts b/src/util/animation.ts
index dc19b9366..34cef34a8 100644
--- a/src/util/animation.ts
+++ b/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;
diff --git a/src/util/fastSmoothScroll.ts b/src/util/fastSmoothScroll.ts
index f7fc2fe26..dbc9fb690 100644
--- a/src/util/fastSmoothScroll.ts
+++ b/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;
+    });
   });
 }
 
diff --git a/src/util/fastSmoothScrollHorizontal.ts b/src/util/fastSmoothScrollHorizontal.ts
index 357a2a49e..985224450 100644
--- a/src/util/fastSmoothScrollHorizontal.ts
+++ b/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;
+    });
   });
 }
 
diff --git a/src/util/switchTheme.ts b/src/util/switchTheme.ts
index 6936f79f7..661299075 100644
--- a/src/util/switchTheme.ts
+++ b/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);