feat: memoize & add highlightDuration parameter to jumpTo[FirstUnread…

…]Message (#2414)

### 🎯 Goal

Memoize `jumpToMessage` and `jumpFirstUnreadMessage` functions and add
`highlightDuration` parameter.

src/components/Channel/Channel.tsx

@@ -65,6 +65,7 @@ import { useTranslationContext } from '../../context/TranslationContext';
 import { TypingProvider } from '../../context/TypingContext';
 
 import {
+  DEFAULT_HIGHLIGHT_DURATION,
   DEFAULT_INITIAL_CHANNEL_PAGE_SIZE,
   DEFAULT_JUMP_TO_PAGE_SIZE,
   DEFAULT_NEXT_CHANNEL_PAGE_SIZE,
@@ -753,46 +754,58 @@ const ChannelInner = <
 
   const clearHighlightedMessageTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const jumpToMessage = async (messageId: string, messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE) => {
-    dispatch({ loadingMore: true, type: 'setLoadingMore' });
-    await channel.state.loadMessageIntoState(messageId, undefined, messageLimit);
+  const jumpToMessage = useCallback(
+    async (
+      messageId: string,
+      messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE,
+      highlightDuration = DEFAULT_HIGHLIGHT_DURATION,
+    ) => {
+      dispatch({ loadingMore: true, type: 'setLoadingMore' });
+      await channel.state.loadMessageIntoState(messageId, undefined, messageLimit);
 
-    /**
-     * if the message we are jumping to has less than half of the page size older messages,
-     * we have jumped to the beginning of the channel.
-     */
-    const indexOfMessage = channel.state.messages.findIndex((message) => message.id === messageId);
-    const hasMoreMessages = indexOfMessage >= Math.floor(messageLimit / 2);
+      /**
+       * if the message we are jumping to has less than half of the page size older messages,
+       * we have jumped to the beginning of the channel.
+       */
+      const indexOfMessage = channel.state.messages.findIndex(
+        (message) => message.id === messageId,
+      );
+      const hasMoreMessages = indexOfMessage >= Math.floor(messageLimit / 2);
 
-    loadMoreFinished(hasMoreMessages, channel.state.messages);
-    dispatch({
-      hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
-      highlightedMessageId: messageId,
-      type: 'jumpToMessageFinished',
-    });
+      loadMoreFinished(hasMoreMessages, channel.state.messages);
+      dispatch({
+        hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
+        highlightedMessageId: messageId,
+        type: 'jumpToMessageFinished',
+      });
 
-    if (clearHighlightedMessageTimeoutId.current) {
-      clearTimeout(clearHighlightedMessageTimeoutId.current);
-    }
+      if (clearHighlightedMessageTimeoutId.current) {
+        clearTimeout(clearHighlightedMessageTimeoutId.current);
+      }
 
-    clearHighlightedMessageTimeoutId.current = setTimeout(() => {
-      clearHighlightedMessageTimeoutId.current = null;
-      dispatch({ type: 'clearHighlightedMessage' });
-    }, 500);
-  };
+      clearHighlightedMessageTimeoutId.current = setTimeout(() => {
+        clearHighlightedMessageTimeoutId.current = null;
+        dispatch({ type: 'clearHighlightedMessage' });
+      }, highlightDuration);
+    },
+    [channel, loadMoreFinished],
+  );
 
-  const jumpToLatestMessage = async () => {
+  const jumpToLatestMessage = useCallback(async () => {
     await channel.state.loadMessageIntoState('latest');
     // FIXME: we cannot rely on constant value 25 as the page size can be customized by integrators
     const hasMoreOlder = channel.state.messages.length >= 25;
     loadMoreFinished(hasMoreOlder, channel.state.messages);
     dispatch({
       type: 'jumpToLatestMessage',
     });
-  };
+  }, [channel, loadMoreFinished]);
 
   const jumpToFirstUnreadMessage = useCallback(
-    async (queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE) => {
+    async (
+      queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE,
+      highlightDuration = DEFAULT_HIGHLIGHT_DURATION,
+    ) => {
       if (!channelUnreadUiState?.unread_messages) return;
       let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
       let firstUnreadMessageId = channelUnreadUiState?.first_unread_message_id;
@@ -914,7 +927,7 @@ const ChannelInner = <
       clearHighlightedMessageTimeoutId.current = setTimeout(() => {
         clearHighlightedMessageTimeoutId.current = null;
         dispatch({ type: 'clearHighlightedMessage' });
-      }, 500);
+      }, highlightDuration);
     },
     [addNotification, channel, loadMoreFinished, t, channelUnreadUiState],
   );

src/constants/limits.ts

@@ -4,3 +4,4 @@ export const DEFAULT_JUMP_TO_PAGE_SIZE = 100;
 export const DEFAULT_THREAD_PAGE_SIZE = 50;
 export const DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
 export const DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024; // 100 MB
+export const DEFAULT_HIGHLIGHT_DURATION = 500;