Make isSingleEmoji synchronous (#2566)

Author: hpeebles

frontend/app/package.json

@@ -87,7 +87,7 @@
         "@open-ic/open-storage-agent": "^0.1.6",
         "@sveltejs/svelte-virtual-list": "^3.0.1",
         "drange": "^2.0.1",
-        "emoji-picker-element": "^1.11.2",
+        "emoji-picker-element": "git+https://github.com/hpeebles/emoji-picker-element.git#716e3a30a87e7f7e471f90bebe1af93d90d866ff",
         "idb": "^6.1.5",
         "identicon.js": "^2.3.3",
         "intl-tel-input": "^17.0.16",

frontend/app/src/components/home/Markdown.svelte

@@ -15,17 +15,13 @@
     export let suppressLinks: boolean = false;
 
     let sanitized = "unsafe";
-    let singleEmoji = false;
 
+    $: singleEmoji = isSingleEmoji(text);
     $: userStore = client.userStore;
     $: options = {
         breaks: !oneLine,
     };
 
-    $: {
-        isSingleEmoji(text).then((b) => singleEmoji = b);
-    }
-
     function replaceUserIds(text: string): string {
         return text.replace(/@UserId\(([\d\w-]+)\)/g, (match, p1) => {
             const u = $userStore[p1];

frontend/app/src/utils/emojis.ts

@@ -1,7 +1,26 @@
 import { Database } from "emoji-picker-element";
 
+const emojiSet = new Set<string>();
+let initializing = false;
+
 export const emojiDatabase = new Database();
 
-export async function isSingleEmoji(text: string): Promise<boolean> {
-    return text.length > 0 && (await emojiDatabase.getEmojiByUnicodeOrName(text)) !== null;
+export function isSingleEmoji(text: string): boolean {
+    initEmojiSet();
+    return emojiSet.has(text);
 }
+
+function initEmojiSet() {
+    if (emojiSet.size > 0 || initializing) return;
+    initializing = true;
+
+    emojiDatabase
+        .getAllNativeEmojis()
+        .then((emojis) => emojis.forEach((e) => {
+            emojiSet.add(e.unicode);
+            e.skins?.forEach((s) => emojiSet.add(s.unicode));
+        }))
+        .finally(() => initializing = false);
+}
+
+initEmojiSet();