[DO NOT MERGE] Mobile performance with lazy

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 = (
+  <div
+    style={{
+      width: "100vw",
+      height: "100vh",
+      display: "flex",
+      backgroundColor: "white",
+      flex: 4,
+      justifyContent: "center",
+      alignItems: "center",
+    }}
+  >
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Loader />
+    </div>
+  </div>
+);
+
 const Layout: FC<LayoutConfigurationWithRouteProps> = (props) => {
   const { component: LayoutComponent, routes, ...restProps } = props;
 
   return (
     <LayoutRoute routeConfigurations={routes} {...restProps}>
-      <LayoutComponent>
-        <Switch>
-          {routes.map((route) => (
-            <Route key={route.path} {...route} />
-          ))}
-        </Switch>
-      </LayoutComponent>
+      <Suspense fallback={SuspenseLoader}>
+        <LayoutComponent>
+          <Switch>
+            {routes.map((route) => (
+              <Route key={route.path} {...route} />
+            ))}
+          </Switch>
+        </LayoutComponent>
+      </Suspense>
     </LayoutRoute>
   );
 };

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;
 }

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: [

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;

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

src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx

@@ -349,6 +349,30 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       }
     }, [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 (
       <>
         <FeedCard
@@ -361,17 +385,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
           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}