From 7c124a870585758336e8d274ff60d3973c324047 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 28 Mar 2025 17:01:21 -0500
Subject: [PATCH] Preload emoji picker data for reactions on web (#8079)

* Preload emoji picker data for reactions on web

* Sort imports
---
 .../dms/EmojiReactionPicker.web.tsx           |  3 +++
 .../text-input/web/useWebPreloadEmoji.ts      | 24 +++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 src/view/com/composer/text-input/web/useWebPreloadEmoji.ts

diff --git a/src/components/dms/EmojiReactionPicker.web.tsx b/src/components/dms/EmojiReactionPicker.web.tsx
index a1272b2937..d9e1c87f7b 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 0000000000..08f18d94bd
--- /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
+}