From b3f9fc0f127290387a48422d7854e95fbb688e19 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 14 Jul 2021 19:56:11 +0300
Subject: [PATCH] [Perf] Message List: Adjust focus animation params

---
 .../middle/message/hooks/useFocusMessage.ts    |  9 ++++-----
 src/config.ts                                  |  5 +++++
 src/modules/actions/ui/messages.ts             | 10 +++++++---
 src/util/fastSmoothScroll.ts                   | 18 +++++++++---------
 4 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/middle/message/hooks/useFocusMessage.ts b/src/components/middle/message/hooks/useFocusMessage.ts
index 0bc950291..348bc7b10 100644
--- a/src/components/middle/message/hooks/useFocusMessage.ts
+++ b/src/components/middle/message/hooks/useFocusMessage.ts
@@ -1,9 +1,8 @@
-import { useLayoutEffect } from '../../../../lib/teact/teact';
-import fastSmoothScroll from '../../../../util/fastSmoothScroll';
 import { FocusDirection } from '../../../../types';
 
-// This is the max scroll offset within existing viewport.
-const FOCUS_MAX_OFFSET = 1200;
+import { useLayoutEffect } from '../../../../lib/teact/teact';
+import fastSmoothScroll from '../../../../util/fastSmoothScroll';
+
 // This is used when the viewport was replaced.
 const RELOCATED_FOCUS_OFFSET = 1000;
 const FOCUS_MARGIN = 20;
@@ -25,7 +24,7 @@ export default function useFocusMessage(
         // `noFocusHighlight` always called from “scroll-to-bottom” buttons
         noFocusHighlight ? 'end' : 'centerOrTop',
         FOCUS_MARGIN,
-        focusDirection === undefined ? FOCUS_MAX_OFFSET : RELOCATED_FOCUS_OFFSET,
+        focusDirection !== undefined ? RELOCATED_FOCUS_OFFSET : undefined,
         focusDirection,
       );
     }
diff --git a/src/config.ts b/src/config.ts
index 541d721b1..e4ee7198d 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -92,6 +92,11 @@ export const LOCAL_MESSAGE_ID_BASE = 1e9;
 
 export const ANIMATION_END_DELAY = 100;
 
+export const FAST_SMOOTH_MAX_DISTANCE = 1500;
+export const FAST_SMOOTH_MIN_DURATION = 250;
+export const FAST_SMOOTH_MAX_DURATION = 600;
+export const FAST_SMOOTH_SHORT_TRANSITION_MAX_DISTANCE = 500; // px
+
 export const STICKER_SIZE_INLINE_DESKTOP_FACTOR = 13;
 export const STICKER_SIZE_INLINE_MOBILE_FACTOR = 11;
 export const STICKER_SIZE_AUTH = 160;
diff --git a/src/modules/actions/ui/messages.ts b/src/modules/actions/ui/messages.ts
index 0f9460162..fa3f10954 100644
--- a/src/modules/actions/ui/messages.ts
+++ b/src/modules/actions/ui/messages.ts
@@ -3,6 +3,8 @@ import { addReducer, getGlobal, setGlobal } from '../../../lib/teact/teactn';
 import { MAIN_THREAD_ID } from '../../../api/types';
 import { FocusDirection } from '../../../types';
 
+import { ANIMATION_END_DELAY, FAST_SMOOTH_MAX_DURATION } from '../../../config';
+import { IS_TOUCH_ENV } from '../../../util/environment';
 import {
   enterMessageSelectMode,
   toggleMessageSelection,
@@ -21,13 +23,15 @@ import {
   selectChatMessages,
   selectAllowedMessageActions,
   selectMessageIdsByGroupId,
-  selectForwardedMessageIdsByGroupId, selectIsViewportNewest, selectReplyingToId, selectReplyStack,
+  selectForwardedMessageIdsByGroupId,
+  selectIsViewportNewest,
+  selectReplyingToId,
+  selectReplyStack,
 } from '../../selectors';
 import { findLast } from '../../../util/iteratees';
-import { IS_TOUCH_ENV } from '../../../util/environment';
 
 const FOCUS_DURATION = 1500;
-const FOCUS_NO_HIGHLIGHT_DURATION = 500; // Matches `fastSmoothScroll:MAX_JS_DURATION`
+const FOCUS_NO_HIGHLIGHT_DURATION = FAST_SMOOTH_MAX_DURATION + ANIMATION_END_DELAY;
 const POLL_RESULT_OPEN_DELAY_MS = 450;
 
 let blurTimeout: number | undefined;
diff --git a/src/util/fastSmoothScroll.ts b/src/util/fastSmoothScroll.ts
index 9338d3665..b5d94db43 100644
--- a/src/util/fastSmoothScroll.ts
+++ b/src/util/fastSmoothScroll.ts
@@ -2,16 +2,15 @@ import { getGlobal } from '../lib/teact/teactn';
 
 import { FocusDirection } from '../types';
 
-import { ANIMATION_LEVEL_MIN } from '../config';
+import {
+  ANIMATION_LEVEL_MIN,
+  FAST_SMOOTH_MAX_DISTANCE, FAST_SMOOTH_MAX_DURATION, FAST_SMOOTH_MIN_DURATION,
+  FAST_SMOOTH_SHORT_TRANSITION_MAX_DISTANCE,
+} from '../config';
 import { dispatchHeavyAnimationEvent } from '../hooks/useHeavyAnimationCheck';
 import { fastRaf } from './schedulers';
 import { animateSingle } from './animation';
 
-const MAX_DISTANCE = 1200;
-const MIN_JS_DURATION = 250;
-const MAX_JS_DURATION = 500;
-const SHORT_CURVE_THRESHOLD = 150; // px
-
 let isAnimating = false;
 
 export default function fastSmoothScroll(
@@ -19,7 +18,7 @@ export default function fastSmoothScroll(
   element: HTMLElement,
   position: ScrollLogicalPosition | 'centerOrTop',
   margin = 0,
-  maxDistance = MAX_DISTANCE,
+  maxDistance = FAST_SMOOTH_MAX_DISTANCE,
   forceDirection?: FocusDirection,
   forceDuration?: number,
   forceCurrentContainerHeight?: boolean,
@@ -119,9 +118,10 @@ function scrollWithJs(
   }
 
   const absPath = Math.abs(path);
-  const transition = absPath < SHORT_CURVE_THRESHOLD ? shortTransition : longTransition;
+  const transition = absPath < FAST_SMOOTH_SHORT_TRANSITION_MAX_DISTANCE ? shortTransition : longTransition;
   const duration = forceDuration || (
-    MIN_JS_DURATION + (absPath / MAX_DISTANCE) * (MAX_JS_DURATION - MIN_JS_DURATION)
+    FAST_SMOOTH_MIN_DURATION
+    + (absPath / FAST_SMOOTH_MAX_DISTANCE) * (FAST_SMOOTH_MAX_DURATION - FAST_SMOOTH_MIN_DURATION)
   );
   const startAt = Date.now();