Merge pull request Expensify#76158 from linhvovan29546/fix/74937-v2-debounce-calculate-emoji-suggestion

Debounce calculateEmojiSuggestion

Author: marcochavezf

src/CONST/index.ts

@@ -1649,7 +1649,7 @@ const CONST = {
         TRIE_INITIALIZATION: 'trie_initialization',
         COMMENT_LENGTH_DEBOUNCE_TIME: 1500,
         SEARCH_OPTION_LIST_DEBOUNCE_TIME: 300,
-        MENTION_SUGGESTION_DEBOUNCE_TIME: 100,
+        SUGGESTION_DEBOUNCE_TIME: 100,
         RESIZE_DEBOUNCE_TIME: 100,
         UNREAD_UPDATE_DEBOUNCE_TIME: 300,
         SEARCH_FILTER_OPTIONS: 'search_filter_options',

src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx

@@ -2,6 +2,7 @@ import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} fr
 import type {Emoji} from '@assets/emojis/types';
 import EmojiSuggestions from '@components/EmojiSuggestions';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
+import useDebounce from '@hooks/useDebounce';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import {getPreferredSkinToneIndex, suggestEmojis} from '@libs/EmojiUtils';
@@ -175,13 +176,23 @@ function SuggestionEmoji({
         [preferredLocale, setHighlightedEmojiIndex, resetSuggestions],
     );
 
+    const debouncedCalculateEmojiSuggestion = useDebounce(
+        useCallback(
+            (newValue: string, selectionStart?: number, selectionEnd?: number) => {
+                calculateEmojiSuggestion(newValue, selectionStart, selectionEnd);
+            },
+            [calculateEmojiSuggestion],
+        ),
+        CONST.TIMING.SUGGESTION_DEBOUNCE_TIME,
+    );
+
     useEffect(() => {
         if (!isComposerFocused) {
             return;
         }
 
-        calculateEmojiSuggestion(value, selection.start, selection.end);
-    }, [value, selection, calculateEmojiSuggestion, isComposerFocused]);
+        debouncedCalculateEmojiSuggestion(value, selection.start, selection.end);
+    }, [value, selection.start, selection.end, debouncedCalculateEmojiSuggestion, isComposerFocused]);
 
     const setShouldBlockSuggestionCalc = useCallback(
         (shouldBlockSuggestionCalc: boolean) => {

src/pages/home/report/ReportActionCompose/SuggestionMention.tsx

@@ -440,7 +440,7 @@ function SuggestionMention({
             },
             [calculateMentionSuggestion],
         ),
-        CONST.TIMING.MENTION_SUGGESTION_DEBOUNCE_TIME,
+        CONST.TIMING.SUGGESTION_DEBOUNCE_TIME,
     );
 
     useEffect(() => {