Commit workspace changes

resources/js/components/comments/EmojiPickerButton.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import data from '@emoji-mart/data'
 import EmojiMartPicker from '../common/EmojiMartPicker'
+import loadEmojiMartData from '../common/loadEmojiMartData'
 
 /**
  * A button that opens a floating emoji picker.
@@ -14,8 +14,25 @@ import EmojiMartPicker from '../common/EmojiMartPicker'
  */
 export default function EmojiPickerButton({ onEmojiSelect, disabled = false, className = '' }) {
   const [open, setOpen] = useState(false)
+  const [pickerData, setPickerData] = useState(null)
   const wrapRef = useRef(null)
 
+  useEffect(() => {
+    if (!open || pickerData) return
+
+    let cancelled = false
+
+    loadEmojiMartData().then((data) => {
+      if (!cancelled) {
+        setPickerData(data)
+      }
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [open, pickerData])
+
   // Close on outside click
   useEffect(() => {
     if (!open) return
@@ -76,15 +93,21 @@ export default function EmojiPickerButton({ onEmojiSelect, disabled = false, cla
           className="absolute bottom-full mb-2 right-0 z-50 shadow-2xl rounded-xl overflow-hidden"
           style={{ filter: 'drop-shadow(0 8px 32px rgba(0,0,0,0.6))' }}
         >
-          <EmojiMartPicker
-            data={data}
-            onEmojiSelect={handleSelect}
-            theme="dark"
-            previewPosition="none"
-            skinTonePosition="none"
-            maxFrequentRows={2}
-            perLine={8}
-          />
+          {pickerData ? (
+            <EmojiMartPicker
+              data={pickerData}
+              onEmojiSelect={handleSelect}
+              theme="dark"
+              previewPosition="none"
+              skinTonePosition="none"
+              maxFrequentRows={2}
+              perLine={8}
+            />
+          ) : (
+            <div className="flex h-24 w-56 items-center justify-center bg-zinc-900 px-4 text-sm text-zinc-300">
+              Loading emojis...
+            </div>
+          )}
         </div>
       )}
     </div>