From 9d58257319560277c06ffa619f91c0e3accfdc40 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 10 Dec 2021 18:33:09 +0100
Subject: [PATCH] [Perf] Message List: Keep previous slide and fix `isReady`
 when animating

---
 src/components/middle/MiddleColumn.tsx | 28 +++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx
index d6b3a1c0f..d883747cf 100644
--- a/src/components/middle/MiddleColumn.tsx
+++ b/src/components/middle/MiddleColumn.tsx
@@ -45,13 +45,14 @@ import {
 import captureEscKeyListener from '../../util/captureEscKeyListener';
 import { pick } from '../../util/iteratees';
 import buildClassName from '../../util/buildClassName';
+import { createMessageHash } from '../../util/routing';
 import useCustomBackground from '../../hooks/useCustomBackground';
 import useWindowSize from '../../hooks/useWindowSize';
 import usePrevDuringAnimation from '../../hooks/usePrevDuringAnimation';
-import calculateMiddleFooterTransforms from './helpers/calculateMiddleFooterTransforms';
 import useLang from '../../hooks/useLang';
 import useHistoryBack from '../../hooks/useHistoryBack';
-import { createMessageHash } from '../../util/routing';
+import usePrevious from '../../hooks/usePrevious';
+import calculateMiddleFooterTransforms from './helpers/calculateMiddleFooterTransforms';
 
 import Transition from '../ui/Transition';
 import MiddleHeader from './MiddleHeader';
@@ -186,6 +187,15 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
   const renderingCanStartBot = usePrevDuringAnimation(canStartBot, CLOSE_ANIMATION_DURATION);
   const renderingCanRestartBot = usePrevDuringAnimation(canRestartBot, CLOSE_ANIMATION_DURATION);
 
+  const prevTransitionKey = usePrevious(currentTransitionKey);
+  const willSwitchMessageList = prevTransitionKey !== undefined && prevTransitionKey !== currentTransitionKey;
+  if (willSwitchMessageList) {
+    setIsReady(false);
+  }
+  const cleanupExceptionKey = (
+    prevTransitionKey !== undefined && prevTransitionKey < currentTransitionKey ? prevTransitionKey : undefined
+  );
+
   useEffect(() => {
     return chatId
       ? captureEscKeyListener(() => {
@@ -329,9 +339,11 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
     openChat({ id: undefined }, true);
   };
 
-  useHistoryBack(renderingChatId && renderingThreadId,
+  useHistoryBack(
+    renderingChatId && renderingThreadId,
     closeChat, undefined, undefined, undefined,
-    messageLists ? messageLists.map(createMessageHash) : []);
+    messageLists?.map(createMessageHash) || [],
+  );
 
   useHistoryBack(isMobileSearchActive, closeLocalTextSearch);
   useHistoryBack(isSelectModeActive, exitMessageSelectMode);
@@ -374,12 +386,14 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
               chatId={renderingChatId}
               threadId={renderingThreadId}
               messageListType={renderingMessageListType}
-              isReady={isReady}
+              isReady={isReady && !willSwitchMessageList}
             />
             <Transition
               name={shouldSkipHistoryAnimations ? 'none' : animationLevel === ANIMATION_LEVEL_MAX ? 'slide' : 'fade'}
               activeKey={currentTransitionKey}
               shouldCleanup
+              cleanupExceptionKey={cleanupExceptionKey}
+              onStop={() => setIsReady(true)}
             >
               {(isActive) => (
                 <>
@@ -392,7 +406,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
                     hasTools={renderingHasTools}
                     onFabToggle={setIsFabShown}
                     onNotchToggle={setIsNotchShown}
-                    isReady={isReady}
+                    isReady={isReady && !willSwitchMessageList}
                     isActive={isActive}
                   />
                   <div className={footerClassName}>
@@ -403,7 +417,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
                         messageListType={renderingMessageListType}
                         dropAreaState={dropAreaState}
                         onDropHide={handleHideDropArea}
-                        isReady={isReady}
+                        isReady={isReady && !willSwitchMessageList}
                       />
                     )}
                     {isPinnedMessageList && (