lazy load (#237)

apps/client/src/components/ui/emoji-picker.tsx

@@ -1,13 +1,14 @@
-import React, { ReactNode } from "react";
-import data from "@emoji-mart/data";
-import Picker from "@emoji-mart/react";
+import React, { ReactNode } from 'react';
 import {
   ActionIcon,
   Popover,
   Button,
   useMantineColorScheme,
-} from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { Suspense } from 'react';
+
+const Picker = React.lazy(() => import('@emoji-mart/react'));
 
 export interface EmojiPickerInterface {
   onEmojiSelect: (emoji: any) => void;
@@ -48,23 +49,25 @@ function EmojiPicker({
           {icon}
         </ActionIcon>
       </Popover.Target>
-      <Popover.Dropdown bg="000" style={{ border: "none" }}>
-        <Picker
-          data={data}
-          onEmojiSelect={handleEmojiSelect}
-          perLine={8}
-          skinTonePosition="search"
-          theme={colorScheme}
-        />
+      <Popover.Dropdown bg="000" style={{ border: 'none' }}>
+        <Suspense fallback={null}>
+          <Picker
+            data={async () => (await import('@emoji-mart/data')).default}
+            onEmojiSelect={handleEmojiSelect}
+            perLine={8}
+            skinTonePosition="search"
+            theme={colorScheme}
+          />
+        </Suspense>
         <Button
           variant="default"
           c="gray"
           size="xs"
           style={{
-            position: "absolute",
+            position: 'absolute',
             zIndex: 2,
-            bottom: "1rem",
-            right: "1rem",
+            bottom: '1rem',
+            right: '1rem',
           }}
           onClick={handleRemoveEmoji}
         >