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

* Preload emoji picker data for reactions on web

* Sort imports

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) => {

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
+}