Commit workspace changes

resources/js/components/forum/EmojiPicker.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react'
 import { createPortal } from 'react-dom'
-import data from '@emoji-mart/data'
 import EmojiMartPicker from '../common/EmojiMartPicker'
+import loadEmojiMartData from '../common/loadEmojiMartData'
 
 /**
  * Emoji picker button for the forum rich-text editor.
@@ -13,10 +13,27 @@ import EmojiMartPicker from '../common/EmojiMartPicker'
  */
 export default function EmojiPicker({ onSelect, editor }) {
   const [open, setOpen] = useState(false)
+  const [pickerData, setPickerData] = useState(null)
   const [panelStyle, setPanelStyle] = useState({})
   const panelRef = useRef(null)
   const buttonRef = useRef(null)
 
+  useEffect(() => {
+    if (!open || pickerData) return
+
+    let cancelled = false
+
+    loadEmojiMartData().then((data) => {
+      if (!cancelled) {
+        setPickerData(data)
+      }
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [open, pickerData])
+
   // Position the portal panel relative to the trigger button
   useEffect(() => {
     if (!open || !buttonRef.current) return
@@ -73,15 +90,21 @@ export default function EmojiPicker({ onSelect, editor }) {
       style={panelStyle}
       className="rounded-xl shadow-2xl overflow-hidden"
     >
-      <EmojiMartPicker
-        data={data}
-        onEmojiSelect={handleSelect}
-        theme="dark"
-        previewPosition="none"
-        skinTonePosition="search"
-        maxFrequentRows={2}
-        perLine={9}
-      />
+      {pickerData ? (
+        <EmojiMartPicker
+          data={pickerData}
+          onEmojiSelect={handleSelect}
+          theme="dark"
+          previewPosition="none"
+          skinTonePosition="search"
+          maxFrequentRows={2}
+          perLine={9}
+        />
+      ) : (
+        <div className="flex h-24 w-[352px] items-center justify-center bg-zinc-900 px-4 text-sm text-zinc-300">
+          Loading emojis...
+        </div>
+      )}
     </div>,
     document.body,
   ) : null