From 0517894e55142a198d769768026d0ef577b06fea Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 12 May 2021 03:13:27 +0300
Subject: [PATCH] Message List: Fix scroll jump when closing chat on mobile

---
 src/components/middle/MiddleColumn.tsx | 27 +++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx
index b9c8f40c..323c1b73 100644
--- a/src/components/middle/MiddleColumn.tsx
+++ b/src/components/middle/MiddleColumn.tsx
@@ -103,10 +103,22 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
   const [isFabShown, setIsFabShown] = useState(false);
   const [isUnpinModalOpen, setIsUnpinModalOpen] = useState(false);
 
+  const hasTools = hasPinnedOrAudioMessage && (
+    windowWidth < MOBILE_SCREEN_MAX_WIDTH
+    || (
+      isRightColumnShown && windowWidth > MIN_SCREEN_WIDTH_FOR_STATIC_RIGHT_COLUMN
+      && windowWidth < SAFE_SCREEN_WIDTH_FOR_STATIC_RIGHT_COLUMN
+    ) || (
+      windowWidth >= MIN_SCREEN_WIDTH_FOR_STATIC_LEFT_COLUMN
+      && windowWidth < SAFE_SCREEN_WIDTH_FOR_CHAT_INFO
+    )
+  );
+
   const renderingChatId = usePrevDuringAnimation(chatId, CLOSE_ANIMATION_DURATION);
   const renderingThreadId = usePrevDuringAnimation(threadId, CLOSE_ANIMATION_DURATION);
   const renderingMessageListType = usePrevDuringAnimation(messageListType, CLOSE_ANIMATION_DURATION);
   const renderingCanPost = usePrevDuringAnimation(canPost, CLOSE_ANIMATION_DURATION);
+  const renderingHasTools = usePrevDuringAnimation(hasTools, CLOSE_ANIMATION_DURATION);
 
   useEffect(() => {
     return chatId
@@ -157,19 +169,8 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
 
   const customBackgroundValue = useCustomBackground(customBackground);
 
-  const hasTools = hasPinnedOrAudioMessage && (
-    windowWidth < MOBILE_SCREEN_MAX_WIDTH
-    || (
-      isRightColumnShown && windowWidth > MIN_SCREEN_WIDTH_FOR_STATIC_RIGHT_COLUMN
-      && windowWidth < SAFE_SCREEN_WIDTH_FOR_STATIC_RIGHT_COLUMN
-    ) || (
-      windowWidth >= MIN_SCREEN_WIDTH_FOR_STATIC_LEFT_COLUMN
-      && windowWidth < SAFE_SCREEN_WIDTH_FOR_CHAT_INFO
-    )
-  );
-
   const className = buildClassName(
-    hasTools && 'has-header-tools',
+    renderingHasTools && 'has-header-tools',
     customBackground && !isCustomBackgroundColor && 'custom-bg-image',
     customBackground && isCustomBackgroundColor && 'custom-bg-color',
     customBackground && isBackgroundBlurred && 'blurred',
@@ -235,7 +236,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
                     threadId={renderingThreadId}
                     type={renderingMessageListType}
                     canPost={renderingCanPost}
-                    hasTools={hasTools}
+                    hasTools={renderingHasTools}
                     onFabToggle={setIsFabShown}
                   />
                   <div className={buildClassName('middle-column-footer', !renderingCanPost && 'no-composer')}>