From 81b1d9d432071c22601bbb11093073252d614af6 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 7 Jul 2021 13:28:59 +0300
Subject: [PATCH] [Perf] Adjust animation curves

---
 src/components/left/LeftColumn.tsx        |  4 ++--
 src/components/left/newChat/NewChat.tsx   |  4 ++--
 src/components/left/settings/Settings.tsx |  4 ++--
 src/styles/_variables.scss                | 14 +++++++++-----
 src/util/environment.ts                   |  1 +
 5 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/left/LeftColumn.tsx b/src/components/left/LeftColumn.tsx
index 19cd8f93..f61ebe0b 100644
--- a/src/components/left/LeftColumn.tsx
+++ b/src/components/left/LeftColumn.tsx
@@ -6,7 +6,7 @@ import { withGlobal } from '../../lib/teact/teactn';
 import { GlobalActions } from '../../global/types';
 import { LeftColumnContent, SettingsScreens } from '../../types';
 
-import { IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment';
+import { LAYERS_ANIMATION_NAME } from '../../util/environment';
 import captureEscKeyListener from '../../util/captureEscKeyListener';
 import { pick } from '../../util/iteratees';
 
@@ -240,7 +240,7 @@ const LeftColumn: FC<StateProps & DispatchProps> = ({
   return (
     <Transition
       id="LeftColumn"
-      name={IS_SINGLE_COLUMN_LAYOUT ? 'slide-layers' : 'push-slide'}
+      name={LAYERS_ANIMATION_NAME}
       renderCount={RENDER_COUNT}
       activeKey={contentType}
       shouldCleanup
diff --git a/src/components/left/newChat/NewChat.tsx b/src/components/left/newChat/NewChat.tsx
index 5f617513..b2384f11 100644
--- a/src/components/left/newChat/NewChat.tsx
+++ b/src/components/left/newChat/NewChat.tsx
@@ -4,7 +4,7 @@ import React, {
 
 import { LeftColumnContent } from '../../../types';
 
-import { IS_SINGLE_COLUMN_LAYOUT } from '../../../util/environment';
+import { LAYERS_ANIMATION_NAME } from '../../../util/environment';
 
 import Transition from '../../ui/Transition';
 import NewChatStep1 from './NewChatStep1';
@@ -36,7 +36,7 @@ const NewChat: FC<OwnProps> = ({
   return (
     <Transition
       id="NewChat"
-      name={IS_SINGLE_COLUMN_LAYOUT ? 'slide-layers' : 'push-slide'}
+      name={LAYERS_ANIMATION_NAME}
       renderCount={RENDER_COUNT}
       activeKey={content}
     >
diff --git a/src/components/left/settings/Settings.tsx b/src/components/left/settings/Settings.tsx
index 41dd856d..dc546e39 100644
--- a/src/components/left/settings/Settings.tsx
+++ b/src/components/left/settings/Settings.tsx
@@ -2,7 +2,7 @@ import React, { FC, memo, useCallback } from '../../../lib/teact/teact';
 
 import { SettingsScreens } from '../../../types';
 
-import { IS_SINGLE_COLUMN_LAYOUT } from '../../../util/environment';
+import { LAYERS_ANIMATION_NAME } from '../../../util/environment';
 import useFoldersReducer from '../../../hooks/reducers/useFoldersReducer';
 import useTwoFaReducer from '../../../hooks/reducers/useTwoFaReducer';
 
@@ -213,7 +213,7 @@ const Settings: FC<OwnProps> = ({
   return (
     <Transition
       id="Settings"
-      name={IS_SINGLE_COLUMN_LAYOUT ? 'slide-layers' : 'push-slide'}
+      name={LAYERS_ANIMATION_NAME}
       activeKey={currentScreen}
       renderCount={TRANSITION_RENDER_COUNT}
     >
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index e0bdd199..1f2e76ac 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -140,6 +140,8 @@ $color-user-8: #faa774;
   --color-default-shadow: #72727240;
   --color-light-shadow: #7272722B;
 
+  --vh: 1vh;
+
   --border-radius-default: 0.75rem;
   --border-radius-default-small: 0.625rem;
   --border-radius-default-tiny: 0.375rem;
@@ -201,14 +203,16 @@ $color-user-8: #faa774;
   --layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
   --layer-blackout-opacity: 0.3;
 
-  --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
-
-  --select-transition: 200ms ease-out;
-
   // For some reason these parameters cause worse animation in desktop Chrome
   @media (max-width: 600px) {
     --layer-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
   }
 
-  --vh: 1vh;
+  --slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
+
+  body.is-android {
+    --slide-transition: 200ms ease-in-out;
+  }
+
+  --select-transition: 200ms ease-out;
 }
diff --git a/src/util/environment.ts b/src/util/environment.ts
index 0e607256..84b4ed5a 100644
--- a/src/util/environment.ts
+++ b/src/util/environment.ts
@@ -60,6 +60,7 @@ export const IS_OPUS_SUPPORTED = Boolean((new Audio()).canPlayType('audio/ogg; c
 export const IS_CANVAS_FILTER_SUPPORTED = (
   !IS_TEST && 'filter' in (document.createElement('canvas').getContext('2d') || {})
 );
+export const LAYERS_ANIMATION_NAME = IS_ANDROID ? 'slide-fade' : IS_IOS ? 'slide-layers' : 'push-slide';
 
 export const DPR = window.devicePixelRatio || 1;