From e0e046cd4b10fefea66c814d893a8adfa5ee682c Mon Sep 17 00:00:00 2001 From: Pavel Meyer Date: Thu, 8 Aug 2024 12:52:43 +0300 Subject: [PATCH 01/10] CW-mobile-performance Added memoization for ProjectFeedItem --- .../ProjectFeedItem/ProjectFeedItem.tsx | 140 +++++++++++------- src/shared/hooks/ModalHook.tsx | 10 +- 2 files changed, 90 insertions(+), 60 deletions(-) diff --git a/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx b/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx index 76e3ad9d8c..32b3eb141b 100644 --- a/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx +++ b/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx @@ -2,10 +2,11 @@ import React, { CSSProperties, FC, MouseEventHandler, - ReactNode, useEffect, + useMemo, useRef, useState, + useCallback, } from "react"; import { useCollapse } from "react-collapsed"; import { useSelector } from "react-redux"; @@ -93,45 +94,56 @@ export const ProjectFeedItem: FC = (props) => { ); const commonPath = getCommonPagePath(commonId); const isProject = checkIsProject(common); - const titleEl = ( - <> - {common?.name} - - + const titleEl = useMemo( + () => ( + <> + {common?.name} + + + ), + [common?.name], ); - const handleClick = () => { + const handleClick = useCallback(() => { history.push(commonPath); - }; + }, [history, commonPath]); - const handleExpand: MouseEventHandler = (event) => { - event.stopPropagation(); - setIsExpanded((v) => !v); - }; + const handleExpand: MouseEventHandler = useCallback( + (event) => { + event.stopPropagation(); + setIsExpanded((v) => !v); + }, + [setIsExpanded], + ); - const renderLeftContent = (): ReactNode => ( -
- - ( +
+ + + + - - -
+
+ ), + [common?.image, common?.name, isExpanded, isProject, handleExpand], ); useEffect(() => { @@ -146,6 +158,45 @@ export const ProjectFeedItem: FC = (props) => { } }, [isExpanded]); + const feedItemProps = useMemo( + () => ({ + className: styles.container, + titleWrapperClassName: styles.titleWrapper, + lastActivity: item.updatedAt.seconds * 1000, + isMobileView: isMobileVersion, + title: titleEl, + onClick: handleClick, + onExpand: handleExpand, + seenOnce: true, + isLoading: !isCommonFetched, + unreadMessages, + lastMessage, + seen: !( + unreadStreamsCount && + unreadStreamsCount > 0 && + unreadMessages === 0 + ), + renderLeftContent, + shouldHideBottomContent: !lastMessage, + isFollowing: feedItemFollow.isFollowing, + notion: common?.notion, + }), + [ + item.updatedAt.seconds, + isMobileVersion, + titleEl, + handleClick, + handleExpand, + isCommonFetched, + unreadMessages, + lastMessage, + unreadStreamsCount, + renderLeftContent, + feedItemFollow.isFollowing, + common?.notion, + ], + ); + if ( !isCommonMemberFetched || (!commonMember && common?.listVisibility === SpaceListVisibility.Members) @@ -164,28 +215,7 @@ export const ProjectFeedItem: FC = (props) => { style={itemStyles} >
- {renderFeedItemBaseContent?.({ - className: styles.container, - titleWrapperClassName: styles.titleWrapper, - lastActivity: item.updatedAt.seconds * 1000, - isMobileView: isMobileVersion, - title: titleEl, - onClick: handleClick, - onExpand: handleExpand, - seenOnce: true, - isLoading: !isCommonFetched, - unreadMessages, - lastMessage, - seen: !( - unreadStreamsCount && - unreadStreamsCount > 0 && - unreadMessages === 0 - ), - renderLeftContent, - shouldHideBottomContent: !lastMessage, - isFollowing: feedItemFollow.isFollowing, - notion: common?.notion, - })} + {renderFeedItemBaseContent?.(feedItemProps)}
{ const [isShowing, setIsShowing] = useState(show); - function onClose() { + const onClose = useCallback(() => { setIsShowing(false); - } + }, []); - function onOpen() { + const onOpen = useCallback(() => { setIsShowing(true); - } + }, []); return { isShowing, From 795445be654785fa1870abfbf4e4d46b65fda2d0 Mon Sep 17 00:00:00 2001 From: Pavel Meyer Date: Thu, 8 Aug 2024 13:05:35 +0300 Subject: [PATCH 02/10] CW-mobile-performance Added memoization for FeedCard --- .../common/components/FeedCard/FeedCard.tsx | 141 +++++++++++------- 1 file changed, 91 insertions(+), 50 deletions(-) diff --git a/src/pages/common/components/FeedCard/FeedCard.tsx b/src/pages/common/components/FeedCard/FeedCard.tsx index 65f87967a9..62c018eaa3 100644 --- a/src/pages/common/components/FeedCard/FeedCard.tsx +++ b/src/pages/common/components/FeedCard/FeedCard.tsx @@ -5,6 +5,8 @@ import React, { forwardRef, useImperativeHandle, PropsWithChildren, + useCallback, + useMemo, } from "react"; import { useCollapse } from "react-collapsed"; import classNames from "classnames"; @@ -106,11 +108,11 @@ export const FeedCard = forwardRef((props, ref) => { }); const containerRef = useRef(null); - const toggleExpanding = () => { + const toggleExpanding = useCallback(() => { if (setExpandedFeedItemId) { setExpandedFeedItemId(isExpanded ? null : feedItemId); } - }; + }, [setExpandedFeedItemId, isExpanded, feedItemId]); const scrollToTargetTop = ( headerOffset: number, @@ -140,7 +142,7 @@ export const FeedCard = forwardRef((props, ref) => { } }; - const scrollToTargetAdjusted = () => { + const scrollToTargetAdjusted = useCallback(() => { if (scrollTimeoutRef.current) { clearTimeout(scrollTimeoutRef.current); } @@ -192,7 +194,7 @@ export const FeedCard = forwardRef((props, ref) => { }); } }, COLLAPSE_DURATION + EXTRA_WAITING_TIME_FOR_TIMEOUT); - }; + }, [isTabletView]); useEffect(() => { if (isExpanded && containerRef?.current) { @@ -203,63 +205,102 @@ export const FeedCard = forwardRef((props, ref) => { clearTimeout(scrollTimeoutRef.current); scrollTimeoutRef.current = null; } - }, [isExpanded]); + }, [isExpanded, scrollToTargetAdjusted]); - const handleClick = () => { + const handleClick = useCallback(() => { onClick?.(); if (!isTabletView && isActive) { toggleExpanding(); } - }; + }, [onClick, isTabletView, isActive, toggleExpanding]); - const handleExpand: MouseEventHandler = (event) => { - event.stopPropagation(); - toggleExpanding(); - }; + const handleExpand: MouseEventHandler = useCallback( + (event) => { + event.stopPropagation(); + toggleExpanding(); + }, + [toggleExpanding], + ); + + useImperativeHandle( + ref, + () => ({ + itemId: feedItemId, + scrollToItem: scrollToTargetAdjusted, + }), + [feedItemId, scrollToTargetAdjusted], + ); - useImperativeHandle(ref, () => ({ - itemId: feedItemId, - scrollToItem: scrollToTargetAdjusted, - })); + const feedItemBaseContent = useMemo(() => { + return renderFeedItemBaseContent?.({ + lastActivity, + unreadMessages, + isMobileView: isTabletView, + isActive, + isExpanded, + canBeExpanded, + onClick: handleClick, + onExpand: handleExpand, + title, + lastMessage: !isLoading ? lastMessage : undefined, + menuItems, + commonName, + commonId, + image, + imageAlt, + isProject, + isPinned, + isFollowing, + type, + seenOnce, + seen, + ownerId, + discussionPredefinedType, + hasFiles, + hasImages, + hasUnseenMention, + notion, + originalCommonIdForLinking, + linkedCommonIds, + }); + }, [ + lastActivity, + unreadMessages, + isTabletView, + isActive, + isExpanded, + canBeExpanded, + handleClick, + handleExpand, + title, + lastMessage, + isLoading, + menuItems, + commonName, + commonId, + image, + imageAlt, + isProject, + isPinned, + isFollowing, + type, + seenOnce, + seen, + ownerId, + discussionPredefinedType, + hasFiles, + hasImages, + hasUnseenMention, + notion, + originalCommonIdForLinking, + linkedCommonIds, + renderFeedItemBaseContent, + ]); return (
- {!isPreviewMode && ( -
- {renderFeedItemBaseContent?.({ - lastActivity, - unreadMessages, - isMobileView: isTabletView, - isActive, - isExpanded, - canBeExpanded, - onClick: handleClick, - onExpand: handleExpand, - title, - lastMessage: !isLoading ? lastMessage : undefined, - menuItems, - commonName, - commonId, - image, - imageAlt, - isProject, - isPinned, - isFollowing, - type, - seenOnce, - seen, - ownerId, - discussionPredefinedType, - hasFiles, - hasImages, - hasUnseenMention, - notion, - originalCommonIdForLinking, - linkedCommonIds, - })} -
- )} + {!isPreviewMode &&
{feedItemBaseContent}
}
Date: Thu, 8 Aug 2024 14:18:52 +0300 Subject: [PATCH 03/10] CW-mobile-performance Added useMemo for lastMessages and menuItems --- .../DiscussionFeedCard/DiscussionFeedCard.tsx | 36 +++++++++----- .../ProjectFeedItem/ProjectFeedItem.tsx | 4 +- .../ProposalFeedCard/ProposalFeedCard.tsx | 36 +++++++++----- .../ChatChannelItem/ChatChannelItem.tsx | 4 +- .../ChatChannelItem/hooks/useMenuItems.tsx | 49 ++++++++++--------- 5 files changed, 81 insertions(+), 48 deletions(-) diff --git a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx index 3da4b2a801..5ae93d5034 100644 --- a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx +++ b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx @@ -349,6 +349,30 @@ const DiscussionFeedCard = forwardRef( } }, [item.data.lastMessage?.content]); + const lastMessage = useMemo(() => { + return getLastMessage({ + commonFeedType: item.data.type, + lastMessage: item.data.lastMessage, + discussion, + currentUserId: userId, + feedItemCreatorName: getUserName(discussionCreator), + commonName, + isProject, + hasFiles: item.data.hasFiles, + hasImages: item.data.hasImages, + }); + }, [ + item.data.type, + item.data.lastMessage, + discussion, + userId, + discussionCreator, + commonName, + isProject, + item.data.hasFiles, + item.data.hasImages, + ]); + return ( <> ( isExpanded={isExpanded} onClick={handleOpenChat} title={cardTitle} - lastMessage={getLastMessage({ - commonFeedType: item.data.type, - lastMessage: item.data.lastMessage, - discussion, - currentUserId: userId, - feedItemCreatorName: getUserName(discussionCreator), - commonName, - isProject, - hasFiles: item.data.hasFiles, - hasImages: item.data.hasImages, - })} + lastMessage={lastMessage} isPreviewMode={isPreviewMode} isPinned={isPinned} commonName={commonName} diff --git a/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx b/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx index 32b3eb141b..d909047807 100644 --- a/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx +++ b/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx @@ -87,11 +87,11 @@ export const ProjectFeedItem: FC = (props) => { duration: COLLAPSE_DURATION, }); const isLoading = !fetched; - const lastMessage = parseStringToTextEditorValue( + const lastMessage = useMemo(() => parseStringToTextEditorValue( `${unreadStreamsCount ?? 0} unread stream${ unreadStreamsCount === 1 ? "" : "s" }`, - ); + ),[unreadStreamsCount]); const commonPath = getCommonPagePath(commonId); const isProject = checkIsProject(common); const titleEl = useMemo( diff --git a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx index 949dcea0cc..3396b0756b 100644 --- a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx +++ b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx @@ -375,6 +375,30 @@ const ProposalFeedCard = forwardRef( } }, [item.data.lastMessage?.content]); + const lastMessage = useMemo(() => { + return getLastMessage({ + commonFeedType: item.data.type, + lastMessage: item.data.lastMessage, + discussion, + currentUserId: userId, + feedItemCreatorName: getUserName(feedItemUser), + commonName, + isProject, + hasFiles: item.data.hasFiles, + hasImages: item.data.hasImages, + }); + }, [ + item.data.type, + item.data.lastMessage, + discussion, + userId, + feedItemUser, + commonName, + isProject, + item.data.hasFiles, + item.data.hasImages, + ]); + return ( <> ( isExpanded={isExpanded} unreadMessages={feedItemUserMetadata?.count || 0} title={cardTitle} - lastMessage={getLastMessage({ - commonFeedType: item.data.type, - lastMessage: item.data.lastMessage, - discussion, - currentUserId: userId, - feedItemCreatorName: getUserName(feedItemUser), - commonName, - isProject, - hasFiles: item.data.hasFiles, - hasImages: item.data.hasImages, - })} + lastMessage={lastMessage} canBeExpanded={discussion?.predefinedType !== PredefinedTypes.General} isPreviewMode={isPreviewMode} commonName={commonName} diff --git a/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx b/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx index ccb85d5d87..cd9016cf70 100644 --- a/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx +++ b/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx @@ -149,6 +149,8 @@ export const ChatChannelItem: FC = (props) => { } }, [isActive, finalTitle, dmUsers?.[0]?.photoURL, dmUsersNames?.[0]]); + const lastMessage = useMemo(() => getLastMessage(chatChannel.lastMessage), [chatChannel.lastMessage]); + return ( = (props) => { isMobileView={isTabletView} isActive={isActive} title={finalTitle} - lastMessage={getLastMessage(chatChannel.lastMessage)} + lastMessage={lastMessage} canBeExpanded={false} onClick={handleOpenChat} menuItems={menuItems} diff --git a/src/pages/inbox/components/ChatChannelItem/hooks/useMenuItems.tsx b/src/pages/inbox/components/ChatChannelItem/hooks/useMenuItems.tsx index 05095fc9b7..4970ee0c75 100644 --- a/src/pages/inbox/components/ChatChannelItem/hooks/useMenuItems.tsx +++ b/src/pages/inbox/components/ChatChannelItem/hooks/useMenuItems.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useMemo } from "react"; import { Message3Icon } from "@/shared/icons"; import { ContextMenuItem as Item } from "@/shared/interfaces"; import { ChatChannelMenuItem } from "../constants"; @@ -15,32 +15,35 @@ export const useMenuItems = ( ): Item[] => { const { chatChannelUserStatus } = options; const { markChatChannelAsSeen, markChatChannelAsUnseen } = actions; - const items: Item[] = [ - { - id: ChatChannelMenuItem.MarkUnread, - text: "Mark as unread", - onClick: async () => { - if (!chatChannelUserStatus) { - return; - } + const items: Item[] = useMemo( + () => [ + { + id: ChatChannelMenuItem.MarkUnread, + text: "Mark as unread", + onClick: async () => { + if (!chatChannelUserStatus) { + return; + } - markChatChannelAsUnseen(chatChannelUserStatus.chatChannelId); + markChatChannelAsUnseen(chatChannelUserStatus.chatChannelId); + }, + icon: , }, - icon: , - }, - { - id: ChatChannelMenuItem.MarkRead, - text: "Mark as read", - onClick: async () => { - if (!chatChannelUserStatus) { - return; - } + { + id: ChatChannelMenuItem.MarkRead, + text: "Mark as read", + onClick: async () => { + if (!chatChannelUserStatus) { + return; + } - markChatChannelAsSeen(chatChannelUserStatus.chatChannelId); + markChatChannelAsSeen(chatChannelUserStatus.chatChannelId); + }, + icon: , }, - icon: , - }, - ]; + ], + [chatChannelUserStatus?.chatChannelId], + ); return getAllowedItems(items, options); }; From 5c9a8601d6dd4d7e41be6fa01bbac5a55fa03969 Mon Sep 17 00:00:00 2001 From: Pavel Meyer Date: Thu, 8 Aug 2024 16:35:21 +0300 Subject: [PATCH 04/10] CW-mobile-performance Added memo for CommonFeed --- src/pages/commonFeed/CommonFeed.tsx | 65 +++++++++++++++++------------ 1 file changed, 39 insertions(+), 26 deletions(-) diff --git a/src/pages/commonFeed/CommonFeed.tsx b/src/pages/commonFeed/CommonFeed.tsx index 8d85ba7a82..0c1cb6b2c2 100644 --- a/src/pages/commonFeed/CommonFeed.tsx +++ b/src/pages/commonFeed/CommonFeed.tsx @@ -237,11 +237,14 @@ const CommonFeedComponent: FC = (props) => { fetchUserRelatedData(); }; - const fetchMoreCommonFeedItems = (feedItemId?: string) => { - if (hasMoreCommonFeedItems && !isSearchingFeedItems) { - fetchCommonFeedItems(feedItemId); - } - }; + const fetchMoreCommonFeedItems = useCallback( + (feedItemId?: string) => { + if (hasMoreCommonFeedItems && !isSearchingFeedItems) { + fetchCommonFeedItems(feedItemId); + } + }, + [hasMoreCommonFeedItems, isSearchingFeedItems, fetchCommonFeedItems] + ); const renderFeedItemBaseContent = useCallback( (props: FeedItemBaseContentProps) => , @@ -281,7 +284,7 @@ const CommonFeedComponent: FC = (props) => { : onProjectJoinModalOpen : onCommonJoinModalOpen; - const renderChatInput = (): ReactNode => { + const renderChatInput = useCallback((): ReactNode => { if (commonMember) { return; } @@ -333,9 +336,19 @@ const CommonFeedComponent: FC = (props) => { )} ); - }; + }, [ + commonMember, + isJoinPending, + commonData, + isRootCommonMember, + canJoin, + onRootCommonJoinModalOpen, + getCommonPagePath, + parentCommonMember, + onJoinCommon + ]); - const renderLayoutTabs = (): ReactElement => { + const renderLayoutTabs = useCallback((): ReactElement => { return (
onJoinCommon()}> @@ -343,7 +356,24 @@ const CommonFeedComponent: FC = (props) => {
); - }; + }, [onJoinCommon]); + + const renderContentWrapper = useCallback( + (children: ReactNode, wrapperStyles?: CSSProperties): ReactNode => + outerContentWrapperRenderer({ + children, + wrapperStyles, + commonData, + commonMember, + isGlobalDataFetched, + }), + [outerContentWrapperRenderer, commonData, commonMember, isGlobalDataFetched] + ); + + const onPullToRefresh = useCallback(() => { + dispatch(cacheActions.clearFeedStateByCommonId(commonId)); + dispatch(commonActions.resetFeedItems()); + }, [dispatch, commonId]); useEffect(() => { if ( @@ -538,23 +568,6 @@ const CommonFeedComponent: FC = (props) => { ); } - const onPullToRefresh = () => { - dispatch(cacheActions.clearFeedStateByCommonId(commonId)); - dispatch(commonActions.resetFeedItems()); - }; - - const renderContentWrapper = ( - children: ReactNode, - wrapperStyles?: CSSProperties, - ): ReactNode => - outerContentWrapperRenderer({ - children, - wrapperStyles, - commonData, - commonMember, - isGlobalDataFetched, - }); - return ( <> Date: Thu, 8 Aug 2024 16:43:44 +0300 Subject: [PATCH 05/10] CW-mobile-performance Fix type issue --- src/pages/commonFeed/CommonFeed.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/commonFeed/CommonFeed.tsx b/src/pages/commonFeed/CommonFeed.tsx index 0c1cb6b2c2..6e85d1c370 100644 --- a/src/pages/commonFeed/CommonFeed.tsx +++ b/src/pages/commonFeed/CommonFeed.tsx @@ -363,7 +363,7 @@ const CommonFeedComponent: FC = (props) => { outerContentWrapperRenderer({ children, wrapperStyles, - commonData, + commonData: commonData!, commonMember, isGlobalDataFetched, }), From 5e0d1c565361c713ea62622e9135bee746e94aa9 Mon Sep 17 00:00:00 2001 From: Pavel Meyer Date: Thu, 8 Aug 2024 17:09:42 +0300 Subject: [PATCH 06/10] CW-mobile-performance Optimize FeedLayout --- src/pages/commonFeed/CommonFeed.tsx | 90 +++++++++++++--------- src/pages/inbox/BaseInbox.tsx | 4 +- src/shared/hooks/useCases/useInboxItems.ts | 6 +- 3 files changed, 59 insertions(+), 41 deletions(-) diff --git a/src/pages/commonFeed/CommonFeed.tsx b/src/pages/commonFeed/CommonFeed.tsx index 6e85d1c370..b9e341b8a1 100644 --- a/src/pages/commonFeed/CommonFeed.tsx +++ b/src/pages/commonFeed/CommonFeed.tsx @@ -243,7 +243,7 @@ const CommonFeedComponent: FC = (props) => { fetchCommonFeedItems(feedItemId); } }, - [hasMoreCommonFeedItems, isSearchingFeedItems, fetchCommonFeedItems] + [hasMoreCommonFeedItems, isSearchingFeedItems, fetchCommonFeedItems], ); const renderFeedItemBaseContent = useCallback( @@ -345,7 +345,7 @@ const CommonFeedComponent: FC = (props) => { onRootCommonJoinModalOpen, getCommonPagePath, parentCommonMember, - onJoinCommon + onJoinCommon, ]); const renderLayoutTabs = useCallback((): ReactElement => { @@ -367,7 +367,12 @@ const CommonFeedComponent: FC = (props) => { commonMember, isGlobalDataFetched, }), - [outerContentWrapperRenderer, commonData, commonMember, isGlobalDataFetched] + [ + outerContentWrapperRenderer, + commonData, + commonMember, + isGlobalDataFetched, + ], ); const onPullToRefresh = useCallback(() => { @@ -526,6 +531,51 @@ const CommonFeedComponent: FC = (props) => { } }, [commonAction]); + const FeedLayoutTopContent = useCallback(() => { + if (!commonData) { + return null; + } + + return ( + { + dispatch(commonActions.setCommonAction(null)); + }} + > + {(commonAction === CommonAction.NewDiscussion || + commonAction === CommonAction.EditDiscussion) && ( + + )} + {commonAction === CommonAction.NewProposal && ( + + )} + + ); + }, [ + JSON.stringify(commonData), + JSON.stringify(commonMember), + commonAction, + scrollToItemsTop, + ]); + if (!isDataFetched) { const headerEl = renderLoadingHeader ? ( renderLoadingHeader() @@ -574,39 +624,7 @@ const CommonFeedComponent: FC = (props) => { ref={setFeedLayoutRef} className={styles.feedLayout} renderContentWrapper={renderContentWrapper} - topContent={ - { - dispatch(commonActions.setCommonAction(null)); - }} - > - {(commonAction === CommonAction.NewDiscussion || - commonAction === CommonAction.EditDiscussion) && ( - - )} - {commonAction === CommonAction.NewProposal && ( - - )} - - } + topContent={FeedLayoutTopContent} common={commonData.common} governance={commonData.governance} commonMember={commonMember} diff --git a/src/pages/inbox/BaseInbox.tsx b/src/pages/inbox/BaseInbox.tsx index 4a92ccae17..6b34a11d8c 100644 --- a/src/pages/inbox/BaseInbox.tsx +++ b/src/pages/inbox/BaseInbox.tsx @@ -143,11 +143,11 @@ const InboxPage: FC = (props) => { }); }; - const fetchMoreInboxItems = () => { + const fetchMoreInboxItems = useCallback(() => { if (hasMoreInboxItems && !isSearchingInboxItems && !areInboxItemsLoading) { fetchInboxItems(); } - }; + },[hasMoreInboxItems, isSearchingInboxItems, areInboxItemsLoading]); const renderFeedItemBaseContent = useCallback( (props: FeedItemBaseContentProps) => , diff --git a/src/shared/hooks/useCases/useInboxItems.ts b/src/shared/hooks/useCases/useInboxItems.ts index 9e15e55087..19b5fde240 100644 --- a/src/shared/hooks/useCases/useInboxItems.ts +++ b/src/shared/hooks/useCases/useInboxItems.ts @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef, useState, useCallback } from "react"; import { useDispatch, useSelector } from "react-redux"; import { selectUser } from "@/pages/Auth/store/selectors"; import { Logger, UserService } from "@/services"; @@ -87,10 +87,10 @@ export const useInboxItems = ( ); }; - const refetch = () => { + const refetch = useCallback(() => { setNewItemsBatches([]); dispatch(inboxActions.refetchInboxItems(Boolean(unread))); - }; + },[unread, setNewItemsBatches]); const addNewInboxItems = ( data: { From c38e29123b0a137f0d088407efa975919252ad82 Mon Sep 17 00:00:00 2001 From: Pavel Meyer Date: Fri, 9 Aug 2024 02:39:33 +0300 Subject: [PATCH 07/10] CW-mobile-performance Added memo for TreeItemTrigger and useMenuItems --- .../ChatChannelItem/hooks/useMenuItems.tsx | 4 +- .../DesktopCommonDropdown.tsx | 95 +++++++++++-------- .../components/TreeItem/TreeItem.tsx | 12 ++- 3 files changed, 64 insertions(+), 47 deletions(-) diff --git a/src/pages/inbox/components/ChatChannelItem/hooks/useMenuItems.tsx b/src/pages/inbox/components/ChatChannelItem/hooks/useMenuItems.tsx index 4970ee0c75..a1f2883cbc 100644 --- a/src/pages/inbox/components/ChatChannelItem/hooks/useMenuItems.tsx +++ b/src/pages/inbox/components/ChatChannelItem/hooks/useMenuItems.tsx @@ -45,5 +45,7 @@ export const useMenuItems = ( [chatChannelUserStatus?.chatChannelId], ); - return getAllowedItems(items, options); + const menuItems = useMemo(() => getAllowedItems(items, options), [items, options]); + + return menuItems; }; diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.tsx b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.tsx index b74bbf19c2..ba44d17354 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.tsx +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.tsx @@ -1,4 +1,10 @@ -import React, { FC, MouseEventHandler, useState } from "react"; +import React, { + FC, + MouseEventHandler, + useState, + useMemo, + useCallback, +} from "react"; import { useSelector } from "react-redux"; import classNames from "classnames"; import { ButtonIcon } from "@/shared/components"; @@ -27,51 +33,56 @@ const DesktopCommonDropdown: FC = (props) => { setMenuRerenderHack((value) => !value); }; - const finalItems = items.map((item) => ({ - ...item, - className: classNames(item.className, styles.menuItem, { - [styles.menuItemForCommonCreation]: item.id === CREATE_COMMON_ITEM_ID, - }), - activeClassName: classNames(item.activeClassName, styles.menuItemActive), - text: ( - <> - - {item.text} - - {item.id === activeItemId && ( - - )} - - ), - onClick: (event) => { - event.preventDefault(); - handleItemClick(); + const finalItems = useMemo(() => { + return items.map((item) => ({ + ...item, + className: classNames(item.className, styles.menuItem, { + [styles.menuItemForCommonCreation]: item.id === CREATE_COMMON_ITEM_ID, + }), + activeClassName: classNames(item.activeClassName, styles.menuItemActive), + text: ( + <> + + {item.text} + + {item.id === activeItemId && ( + + )} + + ), + onClick: (event) => { + event.preventDefault(); + handleItemClick(); - if (item.type !== MenuItemType.Link) { - item.onClick(event); - } - }, - })); + if (item.type !== MenuItemType.Link) { + item.onClick(event); + } + }, + })); + }, [items]); - const onClick: MouseEventHandler = (event) => { + const onClick: MouseEventHandler = useCallback((event) => { event.stopPropagation(); - }; + }, []); - const triggerEl = ( - - {isMobileView ? ( - Change - ) : ( - - )} - + const triggerEl = useMemo( + () => ( + + {isMobileView ? ( + Change + ) : ( + + )} + + ), + [onClick, isActive, isMobileView], ); return ( diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItem/TreeItem.tsx b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItem/TreeItem.tsx index 4436f04e64..714b2c429c 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItem/TreeItem.tsx +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItem/TreeItem.tsx @@ -1,4 +1,4 @@ -import React, { FC, useEffect, useState } from "react"; +import React, { FC, useCallback, useEffect, useState, useMemo } from "react"; import classNames from "classnames"; import { Item } from "../../types"; import { TreeItemTrigger } from "../TreeItemTrigger"; @@ -40,10 +40,14 @@ const TreeItem: FC = (props) => { } }, [isActive, hasNestedContent, isOpenedManually, hasActiveChild]); - const handleTriggerToggle = () => { + const handleTriggerToggle = useCallback(() => { + if (!hasNestedContent) { + return; + } + setIsOpenedManually(!isOpen); setIsOpen((value) => !value); - }; + }, [hasNestedContent]); return (
  • = (props) => { level={level} isActive={isActive} isOpen={isOpen} - onToggle={hasNestedContent ? handleTriggerToggle : undefined} + onToggle={handleTriggerToggle} /> {isOpen ? children : null}
    • From a5d19af53ebdd41cb0a3de21ee631f95f211276a Mon Sep 17 00:00:00 2001 From: Pavel Meyer Date: Fri, 9 Aug 2024 11:11:39 +0300 Subject: [PATCH 08/10] CW-mobile-performance Fix TreeItemTrigger component --- .../components/TreeItem/TreeItem.tsx | 2 +- .../TreeItemTrigger.module.scss | 60 ---------------- .../TreeItemTrigger/TreeItemTrigger.tsx | 69 +++++------------- .../TreeItemTriggerContent.module.scss | 57 +++++++++++++++ .../TreeItemTriggerContent.tsx | 70 +++++++++++++++++++ .../TreeItemTriggerContent/index.ts | 1 + 6 files changed, 148 insertions(+), 111 deletions(-) create mode 100644 src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.module.scss create mode 100644 src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.tsx create mode 100644 src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/index.ts diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItem/TreeItem.tsx b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItem/TreeItem.tsx index 714b2c429c..ca5e9eb2d4 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItem/TreeItem.tsx +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItem/TreeItem.tsx @@ -1,4 +1,4 @@ -import React, { FC, useCallback, useEffect, useState, useMemo } from "react"; +import React, { FC, useCallback, useEffect, useState } from "react"; import classNames from "classnames"; import { Item } from "../../types"; import { TreeItemTrigger } from "../TreeItemTrigger"; diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.module.scss index 2ddcd75848..0bb9d1668d 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.module.scss +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.module.scss @@ -36,63 +36,3 @@ .itemDisabled { cursor: not-allowed; } - -.arrowIconButton { - padding: 0.75rem 1.25rem 0.75rem var(--item-arrow-pl); -} -.arrowIconButtonHidden { - visibility: hidden; -} - -.arrowIcon { - width: 0.5rem; - height: 0.625rem; - color: $c-neutrals-600; - transition: transform 0.2s; -} - -.arrowIconOpen { - transform: rotate(90deg); -} - -.image { - flex-shrink: 0; - margin-right: var(--item-image-mr); - width: 1.5rem; - height: 1.5rem; - object-fit: cover; -} -.imageNonRounded { - border-radius: 0.1875rem; -} -.imageRounded { - border-radius: 50%; -} - -.name { - font-family: PoppinsSans, sans-serif; - font-weight: 600; - font-size: $small; - color: var(--item-text-color); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.nameActive { - color: $white; -} - -.notificationsAmount { - height: 1rem; - margin-left: auto; - padding: 0 0.25rem; - display: flex; - align-items: center; - justify-content: center; - font-weight: 600; - font-size: $xxsmall-2; - color: $c-shades-white; - background-color: $c-primary-400; - border-radius: 0.5rem; -} diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.tsx b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.tsx index acaddb127a..3b62a1039c 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.tsx +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.tsx @@ -1,11 +1,9 @@ import React, { FC, MouseEventHandler } from "react"; import { NavLink } from "react-router-dom"; import classNames from "classnames"; -import { ButtonIcon } from "@/shared/components/ButtonIcon"; -import { SmallArrowIcon } from "@/shared/icons"; -import { CommonAvatar } from "@/shared/ui-kit"; import { useTreeContext } from "../../context"; import { Item } from "../../types"; +import { TreeItemTriggerContent } from "../TreeItemTriggerContent"; import styles from "./TreeItemTrigger.module.scss"; interface TreeItemTriggerProps { @@ -50,51 +48,6 @@ const TreeItemTrigger: FC = (props) => { className, treeItemTriggerStyles?.container, ); - const contentEl = ( - <> - - - - - - - - {item.name} - - {item.nameRightContent} - {item.rightContent} - {!!item.notificationsAmount && ( - - {item.notificationsAmount} - - )} - - ); if (onItemClick || item.disabled) { return ( @@ -106,7 +59,15 @@ const TreeItemTrigger: FC = (props) => { tabIndex={0} onClick={handleItemClick} > - {contentEl} +
    ); } @@ -118,7 +79,15 @@ const TreeItemTrigger: FC = (props) => { title={item.name} aria-label={`Go to ${item.name}`} > - {contentEl} + ); }; diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.module.scss new file mode 100644 index 0000000000..9cb218cf63 --- /dev/null +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.module.scss @@ -0,0 +1,57 @@ +@import "../../../../../../../../../constants"; + +.arrowIconButton { + padding: 0.75rem 1.25rem 0.75rem var(--item-arrow-pl); +} +.arrowIconButtonHidden { + visibility: hidden; +} + +.arrowIcon { + width: 0.5rem; + height: 0.625rem; + color: $c-neutrals-600; + transition: transform 0.2s; +} + +.arrowIconOpen { + transform: rotate(90deg); +} + +.image { + flex-shrink: 0; + margin-right: var(--item-image-mr); + width: 1.5rem; + height: 1.5rem; + object-fit: cover; +} +.imageNonRounded { + border-radius: 0.1875rem; +} +.imageRounded { + border-radius: 50%; +} + +.name { + font-family: PoppinsSans, sans-serif; + font-weight: 600; + font-size: $small; + color: var(--item-text-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.notificationsAmount { + height: 1rem; + margin-left: auto; + padding: 0 0.25rem; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: $xxsmall-2; + color: $c-shades-white; + background-color: $c-primary-400; + border-radius: 0.5rem; +} diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.tsx b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.tsx new file mode 100644 index 0000000000..743c24f1cc --- /dev/null +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.tsx @@ -0,0 +1,70 @@ +import React, { FC } from "react"; +import classNames from "classnames"; +import { ButtonIcon } from "@/shared/components/ButtonIcon"; +import { SmallArrowIcon } from "@/shared/icons"; +import { CommonAvatar } from "@/shared/ui-kit"; +import { TreeItemTriggerStyles } from "../../context"; +import { Item } from "../../types"; +import styles from "./TreeItemTriggerContent.module.scss"; + +interface TreeItemTriggerContentProps { + treeItemTriggerStyles?: TreeItemTriggerStyles; + item: Item; + level: number; + isActive: boolean; + isOpen: boolean; + onToggle?: () => void; + handleToggle: (event: React.MouseEvent) => void; +} + +const TreeItemTriggerContent: FC = (props) => { + const { treeItemTriggerStyles, item, level, isOpen, handleToggle, onToggle } = props; + + return ( + <> + + + + + + + + {item.name} + + {item.nameRightContent} + {item.rightContent} + {!!item.notificationsAmount && ( + + {item.notificationsAmount} + + )} + + ); +}; + +export default TreeItemTriggerContent; diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/index.ts b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/index.ts new file mode 100644 index 0000000000..1c215a96e9 --- /dev/null +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/index.ts @@ -0,0 +1 @@ +export { default as TreeItemTriggerContent } from "./TreeItemTriggerContent"; \ No newline at end of file From fb6414dccc7339dc7a9ae7a7129b8673b00425a3 Mon Sep 17 00:00:00 2001 From: Pavel Meyer Date: Fri, 9 Aug 2024 17:04:18 +0300 Subject: [PATCH 09/10] CW-mobile-performance Optimize components --- .../components/ChatComponent/ChatComponent.tsx | 13 +++++++++---- .../components/FeedLayout/FeedLayout.tsx | 15 +++++++++++---- .../hooks/useCases/useDiscussionMessagesById.ts | 4 ++-- 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx index 096516ceaa..de1e7796fd 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.tsx +++ b/src/pages/common/components/ChatComponent/ChatComponent.tsx @@ -206,10 +206,15 @@ export default function ChatComponent({ chatChannelId: chatChannel?.id || "", participants: chatChannel?.participants, }); - const users = chatChannel ? chatUsers : discussionUsers; - const discussionMessages = chatChannel - ? chatMessagesData.data - : discussionMessagesData.data || []; + const users = useMemo( + () => (chatChannel ? chatUsers : discussionUsers), + [chatUsers, discussionUsers, chatChannel], + ); + const discussionMessages = useMemo( + () => + chatChannel ? chatMessagesData.data : discussionMessagesData.data || [], + [chatChannel, chatMessagesData.data, discussionMessagesData.data], + ); const isFetchedDiscussionMessages = discussionMessagesData.fetched || chatMessagesData.fetched; const areInitialMessagesLoading = isChatChannel diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx index 0f730acc8c..205c352549 100644 --- a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx +++ b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx @@ -215,10 +215,17 @@ const FeedLayout: ForwardRefRenderFunction = ( } = useCommonMember({ shouldAutoReset: false, }); - const commonMember = - chatItem?.nestedItemData?.commonMember || - outerCommonMember || - fetchedCommonMember; + const commonMember = useMemo( + () => + chatItem?.nestedItemData?.commonMember || + outerCommonMember || + fetchedCommonMember, + [ + chatItem?.nestedItemData?.commonMember, + outerCommonMember, + fetchedCommonMember, + ], + ); const userForProfile = useUserForProfile(); const governance = chatItem?.nestedItemData ? fetchedGovernance diff --git a/src/shared/hooks/useCases/useDiscussionMessagesById.ts b/src/shared/hooks/useCases/useDiscussionMessagesById.ts index 6d03f21263..7e6fc36d32 100644 --- a/src/shared/hooks/useCases/useDiscussionMessagesById.ts +++ b/src/shared/hooks/useCases/useDiscussionMessagesById.ts @@ -231,7 +231,7 @@ export const useDiscussionMessagesById = ({ ], ); - const fetchDiscussionMessages = () => { + const fetchDiscussionMessages = useCallback(() => { if ( !discussionId || isEndOfList[discussionId] || @@ -324,7 +324,7 @@ export const useDiscussionMessagesById = ({ } catch(err) { setIsBatchLoading(false); } - }; + },[discussionId, isEndOfList, state.loading, state.data, isBatchLoading, lastVisible, userId, users, directParent, getCommonPagePath, getCommonPageAboutTabPath, onUserClick, onFeedItemClick, onInternalLinkClick, dispatch]); useDeepCompareEffect(() => { (async () => { From e2c3ed8c9c370c20960cc6203a0c3be3e4eb8d19 Mon Sep 17 00:00:00 2001 From: Pavel Meyer Date: Sun, 11 Aug 2024 19:16:36 +0300 Subject: [PATCH 10/10] CW-mobile-performance Added lazy --- .../App/router/components/Layout/Layout.tsx | 44 +++++++++-- .../configuration/commonSidenavLayout.tsx | 77 ++++++++++++++++--- .../App/router/configuration/emptyLayout.tsx | 16 +++- .../configuration/multipleSpacesLayout.tsx | 77 ++++++++++++++++--- 4 files changed, 180 insertions(+), 34 deletions(-) diff --git a/src/pages/App/router/components/Layout/Layout.tsx b/src/pages/App/router/components/Layout/Layout.tsx index a59cc1c887..444ad6c60c 100644 --- a/src/pages/App/router/components/Layout/Layout.tsx +++ b/src/pages/App/router/components/Layout/Layout.tsx @@ -1,20 +1,48 @@ -import React, { FC } from "react"; +import React, { FC, Suspense } from "react"; import { Route, Switch } from "react-router-dom"; +import { Loader } from "@/shared/ui-kit"; import { LayoutConfigurationWithRouteProps } from "../../types"; import { LayoutRoute } from "../LayoutRoute"; +const SuspenseLoader = ( +
    +
    + +
    +
    +); + const Layout: FC = (props) => { const { component: LayoutComponent, routes, ...restProps } = props; return ( - - - {routes.map((route) => ( - - ))} - - + + + + {routes.map((route) => ( + + ))} + + + ); }; diff --git a/src/pages/App/router/configuration/commonSidenavLayout.tsx b/src/pages/App/router/configuration/commonSidenavLayout.tsx index 4535543fda..fea73faa7f 100644 --- a/src/pages/App/router/configuration/commonSidenavLayout.tsx +++ b/src/pages/App/router/configuration/commonSidenavLayout.tsx @@ -1,18 +1,71 @@ -import { BillingPage_v04 } from "@/pages/billing"; -import { ALL_COMMON_PAGE_TABS, CommonPage_v04 } from "@/pages/common"; -import { - CommonCreationPage, - ProjectCreationPage_v04, -} from "@/pages/commonCreation"; -import { CommonEditingPage_v04 } from "@/pages/commonEditing"; -import { CommonFeedPage_v04 } from "@/pages/commonFeed"; -import { InboxPage_v04 } from "@/pages/inbox"; -import { ProfilePage_v04 } from "@/pages/profile"; -import { SettingsPage_v04 } from "@/pages/settings"; +import React from "react"; +// import { BillingPage_v04 } from "@/pages/billing"; +// import { ALL_COMMON_PAGE_TABS, CommonPage_v04 } from "@/pages/common"; +import { ALL_COMMON_PAGE_TABS } from "@/pages/common"; +// import { +// ProjectCreationPage_v04, +// CommonCreationPage, +// } from "@/pages/commonCreation"; +// import { CommonEditingPage_v04 } from "@/pages/commonEditing"; +// import { CommonFeedPage_v04 } from "@/pages/commonFeed"; +// import { InboxPage_v04 } from "@/pages/inbox"; +// import { ProfilePage_v04 } from "@/pages/profile"; +// import { SettingsPage_v04 } from "@/pages/settings"; import { ROUTE_PATHS } from "@/shared/constants"; -import { CommonSidenavLayout } from "@/shared/layouts"; +// import { CommonSidenavLayout } from "@/shared/layouts"; import { LayoutConfiguration, RouteType } from "../types"; +const BillingPage_v04 = React.lazy(() => + import("../../../../pages/billing").then((module) => ({ + default: module.BillingPage_v04, + })), +); +const CommonPage_v04 = React.lazy(() => + import("../../../../pages/common").then((module) => ({ + default: module.CommonPage_v04, + })), +); +const CommonSidenavLayout = React.lazy(() => + import("../../../../shared/layouts").then((module) => ({ + default: module.CommonSidenavLayout, + })), +); +const CommonCreationPage = React.lazy(() => + import("../../../../pages/commonCreation").then((module) => ({ + default: module.CommonCreationPage, + })), +); +const ProjectCreationPage_v04 = React.lazy(() => + import("../../../../pages/commonCreation").then((module) => ({ + default: module.ProjectCreationPage_v04, + })), +); +const CommonFeedPage_v04 = React.lazy(() => + import("../../../../pages/commonFeed").then((module) => ({ + default: module.CommonFeedPage_v04, + })), +); +const CommonEditingPage_v04 = React.lazy(() => + import("../../../../pages/commonEditing").then((module) => ({ + default: module.CommonEditingPage_v04, + })), +); +const InboxPage_v04 = React.lazy(() => + import("../../../../pages/inbox").then((module) => ({ + default: module.InboxPage_v04, + })), +); +const SettingsPage_v04 = React.lazy(() => + import("../../../../pages/settings").then((module) => ({ + default: module.SettingsPage_v04, + })), +); +const ProfilePage_v04 = React.lazy(() => + import("../../../../pages/profile").then((module) => ({ + default: module.ProfilePage_v04, + })), +); + export interface CommonSidenavLayoutRouteOptions { sidenav?: boolean; } diff --git a/src/pages/App/router/configuration/emptyLayout.tsx b/src/pages/App/router/configuration/emptyLayout.tsx index a794de5928..78a9232216 100644 --- a/src/pages/App/router/configuration/emptyLayout.tsx +++ b/src/pages/App/router/configuration/emptyLayout.tsx @@ -1,9 +1,21 @@ -import { PrivacyPolicy } from "@/pages/PrivacyPolicy"; -import { EmptyPage } from "@/pages/empty"; +import React from "react"; +// import { PrivacyPolicy } from "@/pages/PrivacyPolicy"; +// import { EmptyPage } from "@/pages/empty"; import { ROUTE_PATHS } from "@/shared/constants"; import { EmptyLayout } from "@/shared/layouts"; import { LayoutConfiguration } from "../types"; +const EmptyPage = React.lazy(() => + import("../../../../pages/empty").then((module) => ({ + default: module.EmptyPage, + })), +); +const PrivacyPolicy = React.lazy(() => + import("../../../../pages/PrivacyPolicy").then((module) => ({ + default: module.PrivacyPolicy, + })), +); + export const EMPTY_LAYOUT_CONFIGURATION: LayoutConfiguration = { component: EmptyLayout, routes: [ diff --git a/src/pages/App/router/configuration/multipleSpacesLayout.tsx b/src/pages/App/router/configuration/multipleSpacesLayout.tsx index 7c7cd751d4..2e98eaa3ca 100644 --- a/src/pages/App/router/configuration/multipleSpacesLayout.tsx +++ b/src/pages/App/router/configuration/multipleSpacesLayout.tsx @@ -1,18 +1,71 @@ -import { BillingPage } from "@/pages/billing"; -import { ALL_COMMON_PAGE_TABS, CommonPage } from "@/pages/common"; -import { - CommonCreationPage, - ProjectCreationPage, -} from "@/pages/commonCreation"; -import { CommonEditingPage } from "@/pages/commonEditing"; -import { CommonFeedPage } from "@/pages/commonFeed"; -import { InboxPage } from "@/pages/inbox"; -import { ProfilePage } from "@/pages/profile"; -import { SettingsPage } from "@/pages/settings"; +import React from "react"; +// import { BillingPage } from "@/pages/billing"; +// import { ALL_COMMON_PAGE_TABS, CommonPage } from "@/pages/common"; +import { ALL_COMMON_PAGE_TABS } from "@/pages/common"; +// import { +// CommonCreationPage, +// ProjectCreationPage, +// } from "@/pages/commonCreation"; +// import { CommonEditingPage } from "@/pages/commonEditing"; +// import { CommonFeedPage } from "@/pages/commonFeed"; +// import { InboxPage } from "@/pages/inbox"; +// import { ProfilePage } from "@/pages/profile"; +// import { SettingsPage } from "@/pages/settings"; import { ROUTE_PATHS } from "@/shared/constants"; -import { MultipleSpacesLayout } from "@/shared/layouts"; +// import { MultipleSpacesLayout } from "@/shared/layouts"; import { LayoutConfiguration, RouteType } from "../types"; +const CommonFeedPage = React.lazy(() => + import("../../../../pages/commonFeed").then((module) => ({ + default: module.CommonFeedPage, + })), +); +const InboxPage = React.lazy(() => + import("../../../../pages/inbox").then((module) => ({ + default: module.InboxPage, + })), +); +const ProfilePage = React.lazy(() => + import("../../../../pages/profile").then((module) => ({ + default: module.ProfilePage, + })), +); +const SettingsPage = React.lazy(() => + import("../../../../pages/settings").then((module) => ({ + default: module.SettingsPage, + })), +); +const MultipleSpacesLayout = React.lazy(() => + import("../../../../shared/layouts").then((module) => ({ + default: module.MultipleSpacesLayout, + })), +); +const BillingPage = React.lazy(() => + import("../../../../pages/billing").then((module) => ({ + default: module.BillingPage, + })), +); +const CommonPage = React.lazy(() => + import("../../../../pages/common").then((module) => ({ + default: module.CommonPage, + })), +); +const CommonCreationPage = React.lazy(() => + import("../../../../pages/commonCreation").then((module) => ({ + default: module.CommonCreationPage, + })), +); +const ProjectCreationPage = React.lazy(() => + import("../../../../pages/commonCreation").then((module) => ({ + default: module.ProjectCreationPage, + })), +); +const CommonEditingPage = React.lazy(() => + import("../../../../pages/commonEditing").then((module) => ({ + default: module.CommonEditingPage, + })), +); + export interface MultipleSpacesLayoutRouteOptions { withSidenav?: boolean; withBreadcrumbs?: boolean;