fix: visibility of unread notification and underlay in certain scenarios

package/src/components/Channel/Channel.tsx

@@ -1064,6 +1064,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
         if (failedMessages?.length) {
           channel.state.addMessagesSorted(failedMessages);
         }
+        await markRead();
         channel.state.setIsUpToDate(true);
       } else {
         await reloadThread();

package/src/components/MessageList/MessageList.tsx

@@ -415,10 +415,20 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     }
   });
 
+  const messagesLength = useRef<number>(processedMessageList.length);
+
   /**
    * This function should show or hide the unread indicator depending on the
    */
   const updateStickyUnreadIndicator = useStableCallback((viewableItems: ViewToken[]) => {
+    // we need this check to make sure that regular list change do not trigger
+    // the unread notification to appear (for example if the old last read messages
+    // go out of the viewport).
+    if (processedMessageList.length !== messagesLength.current) {
+      return;
+    }
+    messagesLength.current = processedMessageList.length;
+
     if (!viewableItems.length) {
       setIsUnreadNotificationOpen(false);
       return;
@@ -737,10 +747,12 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       const isLastReadMessage =
         channelUnreadState?.last_read_message_id === message.id ||
         (!channelUnreadState?.unread_messages && createdAtTimestamp === lastReadTimestamp);
+      const isMyMessage = message.user?.id === client.userID;
 
       const showUnreadSeparator =
         isLastReadMessage &&
         !isNewestMessage &&
+        !isMyMessage &&
         // The `channelUnreadState?.first_unread_message_id` is here for sent messages unread label
         (!!channelUnreadState?.first_unread_message_id || !!channelUnreadState?.unread_messages);