Preload emoji picker data for reactions on web (#8079)

* Preload emoji picker data for reactions on web

* Sort imports

1 files changed, 24 insertions, 0 deletions

diff --git a/src/view/com/composer/text-input/web/useWebPreloadEmoji.ts b/src/view/com/composer/text-input/web/useWebPreloadEmoji.ts
new file mode 100644
index 000000000..08f18d94b
--- /dev/null
+++ b/src/view/com/composer/text-input/web/useWebPreloadEmoji.ts
@@ -0,0 +1,24 @@
+import React from 'react'
+import {init} from 'emoji-mart'
+
+/**
+ * Only load the emoji picker data once per page load.
+ */
+let loadRequested = false
+
+/**
+ * Preload the emoji picker data to prevent flash.
+ * {@link https://github.com/missive/emoji-mart/blob/16978d04a766eec6455e2e8bb21cd8dc0b3c7436/README.md?plain=1#L194}
+ */
+export function useWebPreloadEmoji({immediate}: {immediate?: boolean} = {}) {
+  const preload = React.useCallback(async () => {
+    if (loadRequested) return
+    loadRequested = true
+    try {
+      const data = (await import('./EmojiPickerData.json')).default
+      init({data})
+    } catch (e) {}
+  }, [])
+  if (immediate) preload()
+  return preload
+}