fix: unread indicator label presence in message list

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -694,7 +694,8 @@ const ChannelWithContext = <
   const [deleted, setDeleted] = useState<boolean>(false);
   const [editing, setEditing] = useState<MessageType<StreamChatGenerics> | undefined>(undefined);
   const [error, setError] = useState<Error | boolean>(false);
-  const [lastRead, setLastRead] = useState<ChannelContextValue<StreamChatGenerics>['lastRead']>();
+  const lastRead = useRef<Date | undefined>(new Date());
+
   const [quotedMessage, setQuotedMessage] = useState<MessageType<StreamChatGenerics> | undefined>(
     undefined,
   );
@@ -824,7 +825,6 @@ const ChannelWithContext = <
   useEffect(() => {
     let listener: ReturnType<typeof channel.on>;
     const initChannel = async () => {
-      setLastRead(new Date());
       const unreadCount = channel.countUnread();
       if (!channel || !shouldSyncChannel || channel.offlineMode) {
         return;
@@ -950,14 +950,15 @@ const ChannelWithContext = <
         return;
       }
 
+      lastRead.current = new Date();
       if (doMarkReadRequest) {
         doMarkReadRequest(channel, updateChannelUnreadState ? setChannelUnreadState : undefined);
       } else {
         try {
           const response = await channel.markRead();
           if (updateChannelUnreadState && response && lastRead) {
             setChannelUnreadState({
-              last_read: lastRead,
+              last_read: lastRead.current,
               last_read_message_id: response?.event.last_read_message_id,
               unread_messages: 0,
             });
@@ -1725,7 +1726,7 @@ const ChannelWithContext = <
     hideStickyDateHeader,
     highlightedMessageId,
     isChannelActive: shouldSyncChannel,
-    lastRead,
+    lastRead: lastRead.current,
     loadChannelAroundMessage,
     loadChannelAtFirstUnreadMessage,
     loading: channelMessagesState.loading,
@@ -1738,7 +1739,7 @@ const ChannelWithContext = <
     reloadChannel,
     scrollToFirstUnreadThreshold,
     setChannelUnreadState,
-    setLastRead,
+    setLastRead: () => {},
     setTargetedMessage,
     StickyHeader,
     targetedMessage,

package/src/components/MessageList/MessageList.tsx

@@ -430,7 +430,6 @@ const MessageListWithContext = <
         setIsUnreadNotificationOpen(false);
         return;
       }
-
       if (unreadIndicatorDate && lastItemDate > unreadIndicatorDate) {
         setIsUnreadNotificationOpen(true);
       } else {
@@ -485,12 +484,13 @@ const MessageListWithContext = <
    * Effect to mark the channel as read when the user scrolls to the bottom of the message list.
    */
   useEffect(() => {
-    const listener: ReturnType<typeof channel.on> = channel.on('message.new', (event) => {
+    const listener: ReturnType<typeof channel.on> = channel.on('message.new', async (event) => {
       const newMessageToCurrentChannel = event.cid === channel.cid;
       const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
 
       if (newMessageToCurrentChannel && mainChannelUpdated && !scrollToBottomButtonVisible) {
-        markRead();
+        console.log('markRead');
+        await markRead();
       }
     });