From d5cb72b27466eddec34ef68c3121d51edfccb8ec Mon Sep 17 00:00:00 2001 From: tazsq Date: Tue, 19 Nov 2024 16:27:36 +0530 Subject: [PATCH] implemented lazy loading to the desired components --- .../src/views/ChatHeader/ChatHeader.jsx | 11 +++++++++-- .../layout_editor/src/views/Message/Message.jsx | 12 ++++++++++-- .../views/ChatInput/ChatInputFormattingToolbar.js | 10 ++++++++-- packages/react/src/views/Message/Message.js | 13 ++++++++++--- 4 files changed, 37 insertions(+), 9 deletions(-) diff --git a/packages/layout_editor/src/views/ChatHeader/ChatHeader.jsx b/packages/layout_editor/src/views/ChatHeader/ChatHeader.jsx index f30880b017..8f2aca41c2 100644 --- a/packages/layout_editor/src/views/ChatHeader/ChatHeader.jsx +++ b/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 && ( - + Loading...}> + + )} {createPortal( diff --git a/packages/layout_editor/src/views/Message/Message.jsx b/packages/layout_editor/src/views/Message/Message.jsx index fccf15b1eb..ecb527dfaa 100644 --- a/packages/layout_editor/src/views/Message/Message.jsx +++ b/packages/layout_editor/src/views/Message/Message.jsx @@ -1,11 +1,11 @@ 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'; @@ -13,6 +13,12 @@ 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 = ({ {!message.t && message._id === '62vhmKJGNoxgvLL7M' ? ( - + Loading...}> + + ) : ( <> )} diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js index fd96f50363..ab65f8a07e 100644 --- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js +++ b/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: ( + Loading...}> + ), video: ( @@ -122,6 +126,7 @@ const ChatInputFormattingToolbar = ({ {surfaceItems.map((key) => chatToolMap[key])} {isEmojiOpen && ( + Loading...}> { @@ -135,6 +140,7 @@ const ChatInputFormattingToolbar = ({ left: 1.85rem; `} /> + )} ); diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js index 8ce3d8bf5c..7fbb4c87f7 100644 --- a/packages/react/src/views/Message/Message.js +++ b/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,7 +9,6 @@ import { appendClassNames, useTheme, } from '@embeddedchat/ui-elements'; -import { Attachments } from '../AttachmentHandler'; import { Markdown } from '../Markdown'; import MessageHeader from './MessageHeader'; import { useMessageStore, useUserStore } from '../../store'; @@ -16,7 +16,6 @@ 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 ? ( <> + Loading...}> + ) : ( @@ -196,6 +200,7 @@ const Message = ({ )} {!message.t && showToolbox ? ( + Loading...}> + /> ) : ( <> )} @@ -250,11 +255,13 @@ const Message = ({ ) : ( <> {message.attachments && ( + Loading...}> + )} )}