Message List: Fix notch and Scroll Down Button when navigating between chats (#1408)

src/components/middle/MessageList.tsx

@@ -56,6 +56,7 @@ type OwnProps = {
   type: MessageListType;
   canPost: boolean;
   isReady: boolean;
+  isActive: boolean;
   onFabToggle: (shouldShow: boolean) => void;
   onNotchToggle: (shouldShow: boolean) => void;
   hasTools?: boolean;
@@ -110,6 +111,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
   isGroupChat,
   canPost,
   isReady,
+  isActive,
   isChatWithSelf,
   isCreator,
   isBot,
@@ -492,6 +494,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
           memoFirstUnreadIdRef={memoFirstUnreadIdRef}
           threadId={threadId}
           type={type}
+          isActive={isActive}
           threadTopMessageId={threadTopMessageId}
           hasLinkedChat={hasLinkedChat}
           isSchedule={messageGroups ? type === 'scheduled' : false}

src/components/middle/MessageListContent.tsx

@@ -30,6 +30,7 @@ interface OwnProps {
   memoFirstUnreadIdRef: { current: number | undefined };
   threadId: number;
   type: MessageListType;
+  isActive: boolean;
   threadTopMessageId: number | undefined;
   hasLinkedChat: boolean | undefined;
   isSchedule: boolean;
@@ -54,6 +55,7 @@ const MessageListContent: FC<OwnProps> = ({
   memoFirstUnreadIdRef,
   threadId,
   type,
+  isActive,
   threadTopMessageId,
   hasLinkedChat,
   isSchedule,
@@ -80,6 +82,7 @@ const MessageListContent: FC<OwnProps> = ({
     isUnread,
     onFabToggle,
     onNotchToggle,
+    isActive,
   );
 
   const lang = useLang();

src/components/middle/MiddleColumn.tsx

@@ -309,7 +309,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
               activeKey={currentTransitionKey}
               shouldCleanup
             >
-              {() => (
+              {(isActive) => (
                 <>
                   <MessageList
                     key={`${renderingChatId}-${renderingThreadId}-${renderingMessageListType}`}
@@ -321,6 +321,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
                     onFabToggle={setIsFabShown}
                     onNotchToggle={setIsNotchShown}
                     isReady={isReady}
+                    isActive={isActive}
                   />
                   <div className={footerClassName}>
                     {renderingCanPost && (

src/components/middle/hooks/useScrollHooks.ts

@@ -22,6 +22,7 @@ export default function useScrollHooks(
   isUnread: boolean,
   onFabToggle: AnyToVoidFunction,
   onNotchToggle: AnyToVoidFunction,
+  isActive: boolean,
 ) {
   const { loadViewportMessages } = getDispatch();
 
@@ -42,6 +43,8 @@ export default function useScrollHooks(
   const fabTriggerRef = useRef<HTMLDivElement>(null);
 
   const toggleScrollTools = useCallback(() => {
+    if (!isActive) return;
+
     if (!messageIds || !messageIds.length) {
       onFabToggle(false);
       onNotchToggle(false);
@@ -61,7 +64,7 @@ export default function useScrollHooks(
 
     onFabToggle(isUnread ? !isAtBottom : !isNearBottom);
     onNotchToggle(!isAtBottom);
-  }, [messageIds, isViewportNewest, containerRef, onFabToggle, isUnread, onNotchToggle]);
+  }, [isActive, messageIds, isViewportNewest, containerRef, onFabToggle, isUnread, onNotchToggle]);
 
   const {
     observe: observeIntersection,