Merge pull request #52009 from huult/51310-fix-emoji-picker-empty-categories-on-search

fix empty categories from briefly displaying when search begins

Author: lakchote

src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx

@@ -2,7 +2,8 @@ import type {ListRenderItem} from '@shopify/flash-list';
 import lodashDebounce from 'lodash/debounce';
 import React, {useCallback} from 'react';
 import type {ForwardedRef} from 'react';
-import {View} from 'react-native';
+import {InteractionManager, View} from 'react-native';
+import type {Emoji} from '@assets/emojis/types';
 import EmojiPickerMenuItem from '@components/EmojiPicker/EmojiPickerMenuItem';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
@@ -43,25 +44,28 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
     } = useEmojiPickerMenu();
     const StyleUtils = useStyleUtils();
 
+    const updateEmojiList = (emojiData: EmojiUtils.EmojiPickerList | Emoji[], headerData: number[] = []) => {
+        setFilteredEmojis(emojiData);
+        setHeaderIndices(headerData);
+
+        InteractionManager.runAfterInteractions(() => {
+            requestAnimationFrame(() => {
+                emojiListRef.current?.scrollToOffset({offset: 0, animated: false});
+            });
+        });
+    };
+
     /**
      * Filter the entire list of emojis to only emojis that have the search term in their keywords
      */
     const filterEmojis = lodashDebounce((searchTerm: string) => {
         const [normalizedSearchTerm, newFilteredEmojiList] = suggestEmojis(searchTerm);
 
-        if (emojiListRef.current) {
-            emojiListRef.current.scrollToOffset({offset: 0, animated: false});
-        }
-
         if (normalizedSearchTerm === '') {
-            setFilteredEmojis(allEmojis);
-            setHeaderIndices(headerRowIndices);
-
-            return;
+            updateEmojiList(allEmojis, headerRowIndices);
+        } else {
+            updateEmojiList(newFilteredEmojiList ?? [], []);
         }
-
-        setFilteredEmojis(newFilteredEmojiList ?? []);
-        setHeaderIndices([]);
     }, 300);
 
     const scrollToHeader = (headerIndex: number) => {