[Glitch] Cancel emoji search requests

Port dca7bc42d25a55351c14861ea9c68229aaf54397 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/actions/compose.js

@@ -20,6 +20,8 @@ import { updateTimeline } from './timelines';
 let fetchComposeSuggestionsAccountsController;
 /** @type {AbortController | undefined} */
 let fetchComposeSuggestionsTagsController;
+/** @type {AbortController | undefined} */
+let searchComposeSuggestionsEmojiController;
 
 export const COMPOSE_CHANGE          = 'COMPOSE_CHANGE';
 export const COMPOSE_SUBMIT_REQUEST  = 'COMPOSE_SUBMIT_REQUEST';
@@ -531,9 +533,8 @@ export function undoUploadCompose(media_id) {
 }
 
 export function clearComposeSuggestions() {
-  if (fetchComposeSuggestionsAccountsController) {
-    fetchComposeSuggestionsAccountsController.abort();
-  }
+  fetchComposeSuggestionsAccountsController?.abort();
+  searchComposeSuggestionsEmojiController?.abort();
   return {
     type: COMPOSE_SUGGESTIONS_CLEAR,
   };
@@ -566,12 +567,25 @@ const fetchComposeSuggestionsAccounts = throttle((dispatch, token) => {
   });
 }, 200, { leading: true, trailing: true });
 
-const fetchComposeSuggestionsEmojis = async (dispatch, token) => {
+const fetchComposeSuggestionsEmojis = (dispatch, token) => {
+  dispatch(clearComposeSuggestions());
+  searchComposeSuggestionsEmojiController = new AbortController();
+
+  void emojiMartSearch({
+    token,
     // Right now we are hard-coding the locale to English since the picker search only supports English.
     // Once we replace the legacy picker we can remove this and use the actual locale of the user.
-  const results = await emojiMartSearch(token, 'en', 5);
+    locale: 'en',
+    limit: 5,
+    signal: searchComposeSuggestionsEmojiController.signal,
+  }).then((results) => {
+    if (results) {
       dispatch(readyComposeSuggestionsEmojis(token, results));
-};
+    }
+  }).finally(() => {
+    searchComposeSuggestionsEmojiController = undefined;
+  });
+}
 
 const fetchComposeSuggestionsTags = throttle((dispatch, token) => {
   if (fetchComposeSuggestionsTagsController) {

app/javascript/flavours/glitch/features/emoji/picker.ts

@@ -22,11 +22,18 @@ type LegacyEmoji =
     };
 
 // Replicates the old legacy search function.
-export async function emojiMartSearch(
-  token: string,
-  locale: string,
+export async function emojiMartSearch({
+  token,
+  locale,
   limit = 5,
-): Promise<LegacyEmoji[]> {
+  signal,
+}: {
+  token: string;
+  locale: string;
+  limit?: number;
+  signal?: AbortSignal;
+}): Promise<LegacyEmoji[] | null> {
+  try {
     const query = token.replace(':', '').trim();
     if (!query.length) {
       return [];
@@ -38,7 +45,12 @@ export async function emojiMartSearch(
       return cachedResult;
     }
 
-  const results = await search({ query, locale, limit });
+    const results = await search({
+      query,
+      locale,
+      limit,
+      signal,
+    });
     const legacyResults = results.map((emoji) =>
       'shortcode' in emoji
         ? ({ id: emoji.shortcode, custom: true } as const)
@@ -50,6 +62,10 @@ export async function emojiMartSearch(
     searchCache.set(cacheKey, legacyResults);
 
     return legacyResults;
+  } catch {
+    log('aborted search for "%s"', token);
+    return null;
+  }
 }
 
 const defaultCategories = [

app/javascript/flavours/glitch/features/emoji/search.ts

@@ -56,13 +56,18 @@ export async function search({
   query: rawQuery,
   locale: localeString,
   limit = 0,
+  signal,
 }: {
   query: string;
   locale: string;
   limit?: number;
+  signal?: AbortSignal;
 }) {
+  log('searching for "%s"', rawQuery);
   performance.mark('emoji-search-start');
 
+  signal?.throwIfAborted();
+
   // Get the locale, and extract tokens from the query.
   const locale = toSupportedLocale(localeString);
   const segmenter = localeToSegmenter(locale);
@@ -93,6 +98,7 @@ export async function search({
       locale,
       i === queryTokens.length - 1,
     );
+    signal?.throwIfAborted();
     const resultMap: ScoreMap = new Map();
     const checkedSet = new Set<string>();
 
@@ -121,6 +127,7 @@ export async function search({
     }
 
     // Score based on legacy shortcodes, using the higher score if there's a match.
+    signal?.throwIfAborted();
     for (const shortcodeResult of shortcodeResults) {
       const emoji =
         resultMap.get(shortcodeResult.hexcode) ??
@@ -183,7 +190,9 @@ export async function search({
 
   // If there are no results, try a cursor-based custom emoji search instead.
   if (mixedResults.length === 0 || mixedResults.length < limit) {
+    signal?.throwIfAborted();
     const customEmojisFound = await fullCustomSearch(query, allEmojiIds);
+    signal?.throwIfAborted();
     if (customEmojisFound.length > 0) {
       log(
         'cursor search found %d results for "%s"',
@@ -373,6 +382,8 @@ async function fullCustomSearch(query: string, existing = new Set<string>()) {
 
   // First iterate over chunks of 1,000 custom emoji keys and find any matches.
   const chunkSize = 1_000;
+  const maxIterations = 10;
+  let index = 0;
   let lastKey: string | null = null;
   let keys: string[] = [];
   do {
@@ -389,6 +400,10 @@ async function fullCustomSearch(query: string, existing = new Set<string>()) {
         foundEmojis.add(key);
       }
     }
+    index++;
+    if (index >= maxIterations) {
+      break;
+    }
   } while (keys.length === chunkSize);
 
   // Next get the full emojis for all matches.

app/javascript/flavours/glitch/styles/mastodon/components.scss

@@ -518,7 +518,7 @@ body > [data-popper-placement] {
 }
 
 .autosuggest-account .account__avatar,
-.autosuggest-emoji img {
+.autosuggest-emoji .emojione {
   display: block;
   width: 24px;
   height: 24px;