perf(emojis): debounce picker search and share one search index

- Debounce the query that drives in-panel search (via a version-safe
  useDebouncedValue hook — useDeferredValue is React 18+), so a broad query no
  longer re-scans the ~1,900-entry index and re-renders up to 90 result cells on
  every keystroke; clearing the field still exits search immediately.
- Memoize buildEmojiSearchData by its data object so the picker panel and the
  composer middleware share a single index build instead of computing it twice.

Author: oliverlaz

src/plugins/Emojis/components/EmojiPickerPanel.tsx

@@ -13,6 +13,7 @@ import {
   type EmojiPickerContextValue,
   EmojiPickerProvider,
 } from '../context/EmojiPickerContext';
+import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { useEmojiPickerState } from '../hooks/useEmojiPickerState';
 import { useGridKeyboardNav } from '../hooks/useGridKeyboardNav';
 import { buildEmojiSearchData, runSearch } from '../search';
@@ -86,6 +87,9 @@ export const EmojiPickerPanel = ({
   const [previewedEmoji, setPreviewedEmoji] = useState<EmojiDataEmoji | null>(null);
   const [activeCategoryId, setActiveCategoryId] = useState<string | undefined>(undefined);
   const [query, setQuery] = useState('');
+  // Debounce the query that drives the search so typing doesn't re-scan the index and
+  // re-render up to 90 result cells on every keystroke (clearing still exits at once).
+  const debouncedQuery = useDebouncedValue(query, 120);
   const emojiGridRef = useRef<EmojiGridHandle>(null);
   const bodyRef = useRef<HTMLDivElement>(null);
 
@@ -123,14 +127,16 @@ export const EmojiPickerPanel = ({
 
   const searchIndex = useMemo(() => (data ? buildEmojiSearchData(data) : []), [data]);
 
-  // `null` when not searching; otherwise the (possibly empty) list of matches.
+  // `null` when not searching; otherwise the (possibly empty) list of matches. Clearing
+  // the field (empty live `query`) exits search immediately; a non-empty query is taken
+  // from the debounced value.
   const searchedEmojis = useMemo<EmojiDataEmoji[] | null>(() => {
-    const trimmed = query.trim();
+    const trimmed = query.trim() && debouncedQuery.trim();
     if (!trimmed || !data) return null;
     return (runSearch(searchIndex, trimmed) ?? [])
       .map((result) => data.emojis[result.id])
       .filter(Boolean);
-  }, [data, query, searchIndex]);
+  }, [data, debouncedQuery, query, searchIndex]);
 
   const onSelectEmoji = useCallback(
     (emoji: EmojiDataEmoji) => {

src/plugins/Emojis/hooks/__tests__/useDebouncedValue.test.ts

@@ -0,0 +1,39 @@
+import { act, renderHook } from '@testing-library/react';
+import { useDebouncedValue } from '../useDebouncedValue';
+
+describe('useDebouncedValue', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('returns the initial value immediately', () => {
+    const { result } = renderHook(() => useDebouncedValue('a', 100));
+    expect(result.current).toBe('a');
+  });
+
+  it('updates to the latest value only after the delay elapses', () => {
+    const { rerender, result } = renderHook(({ v }) => useDebouncedValue(v, 100), {
+      initialProps: { v: 'a' },
+    });
+
+    rerender({ v: 'b' });
+    expect(result.current).toBe('a'); // not yet
+
+    act(() => vi.advanceTimersByTime(100));
+    expect(result.current).toBe('b');
+  });
+
+  it('collapses rapid changes, emitting only the final value', () => {
+    const { rerender, result } = renderHook(({ v }) => useDebouncedValue(v, 100), {
+      initialProps: { v: 'a' },
+    });
+
+    rerender({ v: 'ab' });
+    act(() => vi.advanceTimersByTime(50));
+    rerender({ v: 'abc' });
+    act(() => vi.advanceTimersByTime(50)); // only 50ms since 'abc' → still stale
+    expect(result.current).toBe('a');
+
+    act(() => vi.advanceTimersByTime(50)); // now 100ms since 'abc'
+    expect(result.current).toBe('abc'); // intermediate 'ab' was skipped
+  });
+});

src/plugins/Emojis/hooks/useDebouncedValue.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Returns `value` debounced by `delayMs`: the result only catches up to the latest value
+ * once `delayMs` has elapsed without a further change. Version-safe across React 17–19
+ * (unlike `useDeferredValue`, which is React 18+).
+ */
+export const useDebouncedValue = <T>(value: T, delayMs: number): T => {
+  const [debounced, setDebounced] = useState(value);
+
+  useEffect(() => {
+    const id = setTimeout(() => setDebounced(value), delayMs);
+    return () => clearTimeout(id);
+  }, [value, delayMs]);
+
+  return debounced;
+};

src/plugins/Emojis/search/__tests__/buildEmojiSearchData.test.ts

@@ -0,0 +1,35 @@
+import { buildEmojiSearchData } from '../buildEmojiSearchData';
+import type { EmojiData } from '../../data/types';
+
+const makeData = (): EmojiData =>
+  ({
+    aliases: {},
+    categories: [],
+    emojis: {
+      smile: {
+        id: 'smile',
+        keywords: ['happy'],
+        name: 'Smile',
+        skins: [{ native: '😄', unified: '1f604' }],
+        version: 1,
+      },
+    },
+  }) as unknown as EmojiData;
+
+describe('buildEmojiSearchData', () => {
+  it('memoizes by data object so the panel and middleware share a single build', () => {
+    const data = makeData();
+    expect(buildEmojiSearchData(data)).toBe(buildEmojiSearchData(data));
+  });
+
+  it('builds a distinct index for a different data object', () => {
+    expect(buildEmojiSearchData(makeData())).not.toBe(buildEmojiSearchData(makeData()));
+  });
+
+  it('produces a comma-anchored haystack and resolves the native glyph', () => {
+    const [entry] = buildEmojiSearchData(makeData());
+    expect(entry.id).toBe('smile');
+    expect(entry.search).toContain(',smile');
+    expect(entry.native).toBe('😄');
+  });
+});

src/plugins/Emojis/search/buildEmojiSearchData.ts

@@ -42,17 +42,29 @@ const buildHaystack = (emoji: EmojiDataEmoji): string => {
   return haystack;
 };
 
+// Cache the built index per data object. The dataset is loaded once (a memoized dynamic
+// import), so the picker panel and the composer middleware pass the same object here and
+// share a single ~1,900-entry build instead of computing it twice.
+const cache = new WeakMap<EmojiData, SearchableEmoji[]>();
+
 /**
- * Transforms the vendored emoji dataset into a flat, search-ready index. Pure and
- * side-effect free — the produced `search` haystack matches emoji-mart's format so
- * that ranking parity with `emoji-mart`'s `SearchIndex` is preserved.
+ * Transforms the vendored emoji dataset into a flat, search-ready index (memoized by the
+ * data object). Pure and side-effect free — the produced `search` haystack matches
+ * emoji-mart's format so that ranking parity with `emoji-mart`'s `SearchIndex` is
+ * preserved.
  */
-export const buildEmojiSearchData = (data: EmojiData): SearchableEmoji[] =>
-  Object.values(data.emojis).map((emoji) => ({
+export const buildEmojiSearchData = (data: EmojiData): SearchableEmoji[] => {
+  const cached = cache.get(data);
+  if (cached) return cached;
+
+  const built = Object.values(data.emojis).map((emoji) => ({
     emoticons: emoji.emoticons,
     id: emoji.id,
     name: emoji.name,
     native: emoji.skins[0]?.native ?? '',
     search: buildHaystack(emoji),
     skins: emoji.skins,
   }));
+  cache.set(data, built);
+  return built;
+};