runfix: mark last message not visible on unmount [WPB-9956] (#17743)

* runfix: mark last message unvisible on unmount

* runfix: add deps array

* docs: add comment

src/script/components/Conversation/Conversation.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import {UIEvent, useCallback, useState} from 'react';
+import {UIEvent, useCallback, useEffect, useState} from 'react';
 
 import cx from 'classnames';
 import {container} from 'tsyringe';
@@ -124,6 +124,12 @@ export const Conversation = ({
 
   const {addReadReceiptToBatch} = useReadReceiptSender(repositories.message);
 
+  useEffect(() => {
+    // When the component is mounted we want to make sure its conversation entity's last message is marked as visible
+    // not to display the jump to last message button initially
+    activeConversation?.isLastMessageVisible(true);
+  }, [activeConversation]);
+
   const uploadImages = useCallback(
     (images: File[]) => {
       if (!activeConversation || isHittingUploadLimit(images, repositories.asset)) {

src/script/components/MessagesList/Message/index.tsx

@@ -135,6 +135,9 @@ export const Message = (props: MessageParams & {scrollTo?: ScrollToElement}) =>
     }
   }, [isFocused]);
 
+  // When component is unmounted, it's not visible anymore
+  useEffect(() => onVisibilityLost, [onVisibilityLost]);
+
   // set message elements focus for non content type mesages
   // some non content type message has interactive element like invite people for member message
   useEffect(() => {