fix: improve scrolling fast scenario for scroll to target message

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -675,7 +675,7 @@ const ChannelWithContext = <
 
   const syncingChannelRef = useRef(false);
 
-  const { setTargetedMessage, targetedMessage } = useTargetedMessage();
+  const { highlightedMessageId, setTargetedMessage, targetedMessage } = useTargetedMessage();
 
   /**
    * This ref will hold the abort controllers for
@@ -1648,6 +1648,7 @@ const ChannelWithContext = <
       !!(clientChannelConfig?.commands || [])?.some((command) => command.name === 'giphy'),
     hideDateSeparators,
     hideStickyDateHeader,
+    highlightedMessageId,
     isChannelActive: shouldSyncChannel,
     lastRead,
     loadChannelAroundMessage,

package/src/components/Channel/hooks/useCreateChannelContext.ts

@@ -16,6 +16,7 @@ export const useCreateChannelContext = <
   giphyEnabled,
   hideDateSeparators,
   hideStickyDateHeader,
+  highlightedMessageId,
   isChannelActive,
   lastRead,
   loadChannelAroundMessage,
@@ -60,6 +61,7 @@ export const useCreateChannelContext = <
       giphyEnabled,
       hideDateSeparators,
       hideStickyDateHeader,
+      highlightedMessageId,
       isChannelActive,
       lastRead,
       loadChannelAroundMessage,
@@ -89,6 +91,7 @@ export const useCreateChannelContext = <
       disabled,
       error,
       isChannelActive,
+      highlightedMessageId,
       lastReadTime,
       loading,
       membersLength,

package/src/components/Channel/hooks/useMessageListPagination.tsx

@@ -210,7 +210,6 @@ export const useMessageListPagination = <
           firstUnreadMessageId =
             messageIdx > -1 ? channel.state.messages[messageIdx + 1]?.id : undefined;
         } else {
-          // TODO
           const lastReadTimestamp = last_read.getTime();
           const { index: lastReadIdx, message: lastReadMessage } = findInMessagesByDate(
             channel.state.messages,

package/src/components/Channel/hooks/useTargetedMessage.ts

@@ -2,34 +2,41 @@ import { useEffect, useRef, useState } from 'react';
 
 export const useTargetedMessage = (messageId?: string) => {
   const clearTargetedMessageCall = useRef<ReturnType<typeof setTimeout>>();
-  const [targetedMessage, setTargetedMessage] = useState(messageId);
+  const [targetedMessage, setTargetedMessage] = useState<string | undefined>(messageId);
+  const [highlightedMessageId, setHighlightedMessageId] = useState<string | undefined>();
   const prevTargetedMessageRef = useRef<string>();
 
   useEffect(() => {
     prevTargetedMessageRef.current = targetedMessage;
+    if (targetedMessage) {
+      setHighlightedMessageId(targetedMessage);
+    }
   }, [targetedMessage]);
 
   useEffect(() => {
     clearTargetedMessageCall.current = setTimeout(() => {
       setTargetedMessage(undefined);
+      setHighlightedMessageId(undefined);
     }, 3000);
 
     return () => {
       clearTargetedMessageCall.current && clearTimeout(clearTargetedMessageCall.current);
     };
   }, []);
 
-  const setTargetedMessageTimeoutRef = useRef((messageId: string) => {
+  const setTargetedMessageTimeoutRef = useRef((messageId: string | undefined) => {
     clearTargetedMessageCall.current && clearTimeout(clearTargetedMessageCall.current);
 
     clearTargetedMessageCall.current = setTimeout(() => {
       setTargetedMessage(undefined);
+      setHighlightedMessageId(undefined);
     }, 3000);
 
     setTargetedMessage(messageId);
   });
 
   return {
+    highlightedMessageId,
     prevTargetedMessage: prevTargetedMessageRef.current,
     setTargetedMessage: setTargetedMessageTimeoutRef.current,
     targetedMessage,

package/src/components/MessageList/InlineUnreadIndicator.tsx

@@ -16,7 +16,10 @@ export const InlineUnreadIndicator = () => {
   const { t } = useTranslationContext();
 
   return (
-    <View style={[styles.container, { backgroundColor: light_gray }, container]}>
+    <View
+      accessibilityLabel='Inline unread indicator'
+      style={[styles.container, { backgroundColor: light_gray }, container]}
+    >
       <Text style={[styles.text, { color: grey }, text]}>{t<string>('Unread Messages')}</Text>
     </View>
   );

package/src/components/MessageList/MessageList.tsx

@@ -113,6 +113,7 @@ type MessageListPropsWithContext<
     | 'disabled'
     | 'EmptyStateIndicator'
     | 'hideStickyDateHeader'
+    | 'highlightedMessageId'
     | 'loadChannelAroundMessage'
     | 'loadChannelAtFirstUnreadMessage'
     | 'loading'
@@ -243,6 +244,7 @@ const MessageListWithContext = <
     FooterComponent = InlineLoadingMoreIndicator,
     HeaderComponent = LoadingMoreRecentIndicator,
     hideStickyDateHeader,
+    highlightedMessageId,
     initialScrollToFirstUnreadMessage,
     InlineDateSeparator,
     InlineUnreadIndicator,
@@ -615,7 +617,7 @@ const MessageListWithContext = <
       <Message
         goToMessage={goToMessage}
         groupStyles={isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []}
-        isTargetedMessage={targetedMessage === message.id}
+        isTargetedMessage={highlightedMessageId === message.id}
         lastReceivedId={
           lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined
         }
@@ -916,6 +918,7 @@ const MessageListWithContext = <
           index: indexOfParentInMessageList,
           viewPosition: 0.5, // try to place message in the center of the screen
         });
+        setTargetedMessage(undefined);
       }
     }, 50);
 
@@ -1181,6 +1184,7 @@ export const MessageList = <
     enableMessageGroupingByUser,
     error,
     hideStickyDateHeader,
+    highlightedMessageId,
     isChannelActive,
     loadChannelAroundMessage,
     loadChannelAtFirstUnreadMessage,
@@ -1235,6 +1239,7 @@ export const MessageList = <
         error,
         FlatList,
         hideStickyDateHeader,
+        highlightedMessageId,
         initialScrollToFirstUnreadMessage,
         InlineDateSeparator,
         InlineUnreadIndicator,

package/src/contexts/channelContext/ChannelContext.tsx

@@ -129,7 +129,7 @@ export type ChannelContextValue<
     React.SetStateAction<ChannelUnreadState<StreamChatGenerics> | undefined>
   >;
   setLastRead: React.Dispatch<React.SetStateAction<Date | undefined>>;
-  setTargetedMessage: (messageId: string) => void;
+  setTargetedMessage: (messageId?: string) => void;
   /**
    * Abort controller for cancelling async requests made for uploading images/files
    * Its a map of filename and AbortController
@@ -138,6 +138,10 @@ export type ChannelContextValue<
   channelUnreadState?: ChannelUnreadState<StreamChatGenerics>;
   disabled?: boolean;
   enableMessageGroupingByUser?: boolean;
+  /**
+   * Id of message, which is highlighted in the channel.
+   */
+  highlightedMessageId?: string;
   isChannelActive?: boolean;
 
   lastRead?: Date;