Implemented lazy loading to desired components

packages/layout_editor/src/views/ChatHeader/ChatHeader.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
+import { Suspense, lazy } from 'react';
 import { Heading, Box, Icon, useTheme } from '@embeddedchat/ui-elements';
 import { getChatHeaderStyles } from './ChatHeader.styles';
-import { Menu } from '../../components/SortableMenu';
 import SurfaceItem from '../../components/SurfaceMenu/SurfaceItem';
 import {
   DndContext,
@@ -18,6 +18,11 @@ import MenuItem from '../../components/SortableMenu/MenuItem';
 import SurfaceMenu from '../../components/SurfaceMenu/SurfaceMenu';
 import useHeaderItemsStore from '../../store/headerItemsStore';
 
+const Menu = lazy(() =>
+  import('../../components/SortableMenu').then((module) => ({
+    default: module.Menu,
+  }))
+);
 const ChatHeader = () => {
   const styles = getChatHeaderStyles(useTheme());
   const { surfaceItems, menuItems, setSurfaceItems, setMenuItems } =
@@ -267,7 +272,9 @@ const ChatHeader = () => {
               />
             )}
             {menuOptions.length > 0 && (
-              <Menu options={menuOptions} onRemove={removeMenuItem} />
+              <Suspense fallback={<div>Loading...</div>}>
+                <Menu options={menuOptions} onRemove={removeMenuItem} />
+              </Suspense>
             )}
           </Box>
           {createPortal(

packages/layout_editor/src/views/Message/Message.jsx

@@ -1,18 +1,24 @@
 import React from 'react';
+import { Suspense, lazy } from 'react';
 import PropTypes from 'prop-types';
 import { format } from 'date-fns';
 import { Box, useTheme } from '@embeddedchat/ui-elements';
 import { Markdown } from '../Markdown';
 import MessageHeader from './MessageHeader';
 import { MessageBody } from './MessageBody';
-import { MessageToolbox } from './MessageToolbox';
 import { MessageDivider } from './MessageDivider';
 import MessageAvatarContainer from './MessageAvatarContainer';
 import MessageBodyContainer from './MessageBodyContainer';
 import { getMessageStyles } from './Message.styles';
 import useBubbleStyles from './BubbleVariant/useBubbleStyles';
 import useLayoutStore from '../../store/layoutStore';
 
+const MessageToolbox = lazy(() =>
+  import('./MessageToolbox').then((module) => ({
+    default: module.MessageToolbox,
+  }))
+);
+
 const Message = ({
   message,
   sequential = false,
@@ -65,7 +71,9 @@ const Message = ({
                 <Markdown body={message} isReaction={false} />
 
                 {!message.t && message._id === '62vhmKJGNoxgvLL7M' ? (
-                  <MessageToolbox variantStyles={variantStyles} />
+                  <Suspense fallback={<div>Loading...</div>}>
+                    <MessageToolbox variantStyles={variantStyles} />
+                  </Suspense>
                 ) : (
                   <></>
                 )}

packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { lazy,Suspense } from 'react';
 import { css } from '@emotion/react';
 import {
   Box,
@@ -8,14 +9,15 @@ import {
   useComponentOverrides,
   useTheme,
 } from '@embeddedchat/ui-elements';
-import { EmojiPicker } from '../EmojiPicker/index';
 import { useMessageStore } from '../../store';
 import { formatter } from '../../lib/textFormat';
-import AudioMessageRecorder from './AudioMessageRecorder';
 import VideoMessageRecorder from './VideoMessageRecoder';
 import { getChatInputFormattingToolbarStyles } from './ChatInput.styles';
 import formatSelection from '../../lib/formatSelection';
 
+const EmojiPicker = lazy(()=>import("../EmojiPicker/index").then(module=>({default:module.EmojiPicker})));
+const AudioMessageRecorder = lazy(()=>import("./AudioMessageRecorder").then(module=>({default:module.AudioMessageRecorder})));
+
 const ChatInputFormattingToolbar = ({
   messageRef,
   inputRef,
@@ -71,7 +73,9 @@ const ChatInputFormattingToolbar = ({
     ),
     audio: (
       <Tooltip text="Audio Message" position="top" key="audio">
+        <Suspense fallback={<div>Loading...</div>}>
         <AudioMessageRecorder />
+        </Suspense>
       </Tooltip>
     ),
     video: (
@@ -122,6 +126,7 @@ const ChatInputFormattingToolbar = ({
       {surfaceItems.map((key) => chatToolMap[key])}
 
       {isEmojiOpen && (
+        <Suspense fallback={<div>Loading...</div>}>
         <EmojiPicker
           key="emoji-picker"
           handleEmojiClick={(emoji) => {
@@ -135,6 +140,7 @@ const ChatInputFormattingToolbar = ({
             left: 1.85rem;
           `}
         />
+        </Suspense>
       )}
     </Box>
   );

packages/react/src/views/Message/Message.js

@@ -1,4 +1,5 @@
 import React, { memo, useContext } from 'react';
+import {Suspense,lazy} from 'react';
 import PropTypes from 'prop-types';
 import { format } from 'date-fns';
 import {
@@ -8,15 +9,13 @@ import {
   appendClassNames,
   useTheme,
 } from '@embeddedchat/ui-elements';
-import { Attachments } from '../AttachmentHandler';
 import { Markdown } from '../Markdown';
 import MessageHeader from './MessageHeader';
 import { useMessageStore, useUserStore } from '../../store';
 import RCContext from '../../context/RCInstance';
 import { MessageBody } from './MessageBody';
 import { MessageReactions } from './MessageReactions';
 import { MessageMetrics } from './MessageMetrics';
-import { MessageToolbox } from './MessageToolbox';
 import { MessageDivider } from './MessageDivider';
 import MessageAvatarContainer from './MessageAvatarContainer';
 import MessageBodyContainer from './MessageBodyContainer';
@@ -25,6 +24,9 @@ import { getMessageStyles } from './Message.styles';
 import useBubbleStyles from './BubbleVariant/useBubbleStyles';
 import UiKitMessageBlock from './uiKit/UiKitMessageBlock';
 
+const MessageToolbox = lazy(()=>import("./MessageToolbox").then(module=>({default:module.MessageToolbox})));
+const Attachments = lazy(()=>import("../AttachmentHandler").then(module=>({default:module.Attachments})));
+
 const Message = ({
   message,
   type = 'default',
@@ -178,10 +180,12 @@ const Message = ({
                 {message.attachments && message.attachments.length > 0 ? (
                   <>
                     <Markdown body={message} isReaction={false} />
+                    <Suspense fallback={<div>Loading...</div>}>
                     <Attachments
                       attachments={message.attachments}
                       variantStyles={variantStyles}
                     />
+                    </Suspense>
                   </>
                 ) : (
                   <Markdown body={message} isReaction={false} />
@@ -196,6 +200,7 @@ const Message = ({
                 )}
 
                 {!message.t && showToolbox ? (
+                  <Suspense fallback={<div>Loading...</div>}>
                   <MessageToolbox
                     message={message}
                     isEditing={editMessage._id === message._id}
@@ -219,7 +224,7 @@ const Message = ({
                     }}
                     isThreadMessage={type === 'thread'}
                     variantStyles={variantStyles}
-                  />
+                  /></Suspense>
                 ) : (
                   <></>
                 )}
@@ -250,11 +255,13 @@ const Message = ({
           ) : (
             <>
               {message.attachments && (
+                <Suspense fallback={<div>Loading...</div>}>
                 <Attachments
                   attachments={message.attachments}
                   type={message.t}
                   variantStyles={variantStyles}
                 />
+                </Suspense>
               )}
             </>
           )}