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

* Preload emoji picker data for reactions on web

* Sort imports

2 files changed, 27 insertions, 0 deletions

diff --git a/src/components/dms/EmojiReactionPicker.web.tsx b/src/components/dms/EmojiReactionPicker.web.tsx
index a1272b293..d9e1c87f7 100644
--- a/src/components/dms/EmojiReactionPicker.web.tsx
+++ b/src/components/dms/EmojiReactionPicker.web.tsx
@@ -8,6 +8,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
 import {useSession} from '#/state/session'
 import {type Emoji} from '#/view/com/composer/text-input/web/EmojiPicker.web'
+import {useWebPreloadEmoji} from '#/view/com/composer/text-input/web/useWebPreloadEmoji'
 import {atoms as a, flatten, useTheme} from '#/alf'
 import {DotGrid_Stroke2_Corner0_Rounded as DotGridIcon} from '#/components/icons/DotGrid'
 import * as Menu from '#/components/Menu'
@@ -50,6 +51,8 @@ function MenuInner({
   const {control} = Menu.useMenuContext()
   const {currentAccount} = useSession()
 
+  useWebPreloadEmoji({immediate: true})
+
   const [expanded, setExpanded] = useState(false)
 
   const handleEmojiPickerResponse = (emoji: Emoji) => {
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
+}