Merge pull request #2740 from daostack/CW-performance

Performance: large memory usage
daostack · Oct 8, 2024 · ef235f2 · ef235f2
2 parents c48ade7 + a21a84e
commit ef235f2
Show file tree

Hide file tree

Showing 16 changed files with 357 additions and 285 deletions.
diff --git a/public/index.html b/public/index.html
@@ -46,9 +46,10 @@
       }
 
       .loader-wrapper {
-        position: relative;
+        position: absolute;
         left: 50%;
-        transform: translateX(-50%);
+        top: 50%;
+        transform: translate(-50%, -50%);
         height: 75px;
         width: 75px;
         background-image: url(/icons/loader-pink.svg);

diff --git a/src/pages/App/router/Router.tsx b/src/pages/App/router/Router.tsx
@@ -6,7 +6,7 @@ import { ROUTES } from "./configuration";
 const Router: FC = () => (
   <Switch>
     {ROUTES.map((layoutConfiguration, index) => (
-      <Layout key={index} {...layoutConfiguration} />
+        <Layout key={index} {...layoutConfiguration} />
     ))}
     <Redirect />
   </Switch>

diff --git a/src/pages/App/router/components/Layout/Layout.tsx b/src/pages/App/router/components/Layout/Layout.tsx
@@ -1,19 +1,20 @@
-import React, { FC } from "react";
+import React, { FC, Suspense } from "react";
 import { Route, Switch } from "react-router-dom";
 import { LayoutConfigurationWithRouteProps } from "../../types";
 import { LayoutRoute } from "../LayoutRoute";
+import { SuspenseLoader } from "@/shared/ui-kit";
 
 const Layout: FC<LayoutConfigurationWithRouteProps> = (props) => {
   const { component: LayoutComponent, routes, ...restProps } = props;
 
   return (
     <LayoutRoute routeConfigurations={routes} {...restProps}>
       <LayoutComponent>
+      <Suspense fallback={SuspenseLoader}>
         <Switch>
-          {routes.map((route) => (
-            <Route key={route.path} {...route} />
-          ))}
+          {routes.map((route) => <Route key={route.path} {...route} />)}
         </Switch>
+        </Suspense>
       </LayoutComponent>
     </LayoutRoute>
   );

diff --git a/src/pages/App/router/components/LayoutRoute/LayoutRoute.tsx b/src/pages/App/router/components/LayoutRoute/LayoutRoute.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from "react";
+import React, { FC, Suspense, useMemo } from "react";
 import { useSelector } from "react-redux";
 import { Route, RouteProps } from "react-router-dom";
 import { Route as RouteConfiguration } from "@/pages/App/router/types";
@@ -9,6 +9,7 @@ import {
 import { matchRoute } from "@/shared/utils";
 import { LayoutRouteContext, LayoutRouteContextValue } from "./context";
 import { renderRouteContent } from "./helpers";
+import { SuspenseLoader } from "@/shared/ui-kit";
 
 interface PrivateRouteProps extends RouteProps {
   routeConfigurations: RouteConfiguration[];
@@ -36,19 +37,21 @@ const LayoutRoute: FC<PrivateRouteProps> = (props) => {
 
   return (
     <LayoutRouteContext.Provider value={contextValue}>
-      <Route
-        {...restProps}
-        render={(routeProps) =>
-          renderRouteContent({
-            ...routeProps,
-            component,
-            children,
-            configuration: routeConfiguration,
-            userRoles: userRoles || [],
-            authenticated,
-          })
-        }
-      />
+          <Suspense fallback={SuspenseLoader}>
+        <Route
+          {...restProps}
+          render={(routeProps) =>
+            renderRouteContent({
+              ...routeProps,
+              component,
+              children,
+              configuration: routeConfiguration,
+              userRoles: userRoles || [],
+              authenticated,
+            })
+          }
+        />
+      </Suspense>
     </LayoutRouteContext.Provider>
   );
 };

diff --git a/src/pages/App/router/configuration/commonSidenavLayout.tsx b/src/pages/App/router/configuration/commonSidenavLayout.tsx
@@ -1,76 +1,75 @@
-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, { lazy } from "react";
 import { ROUTE_PATHS } from "@/shared/constants";
 import { CommonSidenavLayout } from "@/shared/layouts";
 import { LayoutConfiguration, RouteType } from "../types";
+import { ALL_COMMON_PAGE_TABS } from "@/pages/common";
+
+const InboxPage_v04 = lazy(() => import("@/pages/inbox").then(module => ({ default: module.InboxPage_v04 })));
+const CommonCreationPage = lazy(() => import("@/pages/commonCreation").then(module => ({ default: module.CommonCreationPage })));
+const CommonFeedPage_v04 = lazy(() => import("@/pages/commonFeed").then(module => ({ default: module.CommonFeedPage_v04 })));
+const ProjectCreationPage_v04 = lazy(() => import("@/pages/commonCreation").then(module => ({ default: module.ProjectCreationPage_v04 })));
+const CommonEditingPage_v04 = lazy(() => import("@/pages/commonEditing").then(module => ({ default: module.CommonEditingPage_v04 })));
+const ProfilePage_v04 = lazy(() => import("@/pages/profile").then(module => ({ default: module.ProfilePage_v04 })));
+const BillingPage_v04 = lazy(() => import("@/pages/billing").then(module => ({ default: module.BillingPage_v04 })));
+const SettingsPage_v04 = lazy(() => import("@/pages/settings").then(module => ({ default: module.SettingsPage_v04 })));
+const CommonPage_v04 = lazy(() => import("@/pages/common").then(module => ({ default: module.CommonPage_v04 })));
 
 export interface CommonSidenavLayoutRouteOptions {
   sidenav?: boolean;
 }
 
-const getCommonPageConfiguration =
-  (): LayoutConfiguration<CommonSidenavLayoutRouteOptions>["routes"] =>
-    ALL_COMMON_PAGE_TABS.map((tab) => ({
-      path: `${ROUTE_PATHS.V04_COMMON}/${tab}` as ROUTE_PATHS,
-      exact: true,
-      component: CommonPage_v04,
-    }));
+const getCommonPageConfiguration = (): LayoutConfiguration["routes"] =>
+  ALL_COMMON_PAGE_TABS.map((tab) => ({
+    path: `${ROUTE_PATHS.V04_COMMON}/${tab}` as ROUTE_PATHS,
+    exact: true,
+    component: CommonPage_v04,
+  }));
 
-export const COMMON_SIDENAV_LAYOUT_CONFIGURATION: LayoutConfiguration<CommonSidenavLayoutRouteOptions> =
-  {
-    component: CommonSidenavLayout,
-    routes: [
-      {
-        path: ROUTE_PATHS.V04_INBOX,
-        exact: true,
-        component: InboxPage_v04,
-        type: RouteType.Private,
-        unauthenticatedRedirectPath: ROUTE_PATHS.HOME,
-      },
-      {
-        path: ROUTE_PATHS.V04_COMMON_CREATION,
-        exact: true,
-        component: CommonCreationPage,
-      },
-      {
-        path: ROUTE_PATHS.V04_COMMON,
-        exact: true,
-        component: CommonFeedPage_v04,
-      },
-      ...getCommonPageConfiguration(),
-      {
-        path: ROUTE_PATHS.V04_PROJECT_CREATION,
-        exact: true,
-        component: ProjectCreationPage_v04,
-      },
-      {
-        path: ROUTE_PATHS.V04_COMMON_EDITING,
-        exact: true,
-        component: CommonEditingPage_v04,
-      },
-      {
-        path: ROUTE_PATHS.V04_PROFILE,
-        exact: true,
-        component: ProfilePage_v04,
-      },
-      {
-        path: ROUTE_PATHS.V04_BILLING,
-        exact: true,
-        component: BillingPage_v04,
-      },
-      {
-        path: ROUTE_PATHS.V04_SETTINGS,
-        exact: true,
-        component: SettingsPage_v04,
-      },
-    ],
-  };
+export const COMMON_SIDENAV_LAYOUT_CONFIGURATION: LayoutConfiguration = {
+  component: CommonSidenavLayout,
+  routes: [
+    {
+      path: ROUTE_PATHS.V04_INBOX,
+      exact: true,
+      component: InboxPage_v04,
+      type: RouteType.Private,
+      unauthenticatedRedirectPath: ROUTE_PATHS.HOME,
+    },
+    {
+      path: ROUTE_PATHS.V04_COMMON_CREATION,
+      exact: true,
+      component: CommonCreationPage,
+    },
+    {
+      path: ROUTE_PATHS.V04_COMMON,
+      exact: true,
+      component: CommonFeedPage_v04,
+    },
+    ...getCommonPageConfiguration(),
+    {
+      path: ROUTE_PATHS.V04_PROJECT_CREATION,
+      exact: true,
+      component: ProjectCreationPage_v04,
+    },
+    {
+      path: ROUTE_PATHS.V04_COMMON_EDITING,
+      exact: true,
+      component: CommonEditingPage_v04,
+    },
+    {
+      path: ROUTE_PATHS.V04_PROFILE,
+      exact: true,
+      component: ProfilePage_v04,
+    },
+    {
+      path: ROUTE_PATHS.V04_BILLING,
+      exact: true,
+      component: BillingPage_v04,
+    },
+    {
+      path: ROUTE_PATHS.V04_SETTINGS,
+      exact: true,
+      component: SettingsPage_v04,
+    },
+  ],
+};
diff --git a/src/pages/App/router/configuration/emptyLayout.tsx b/src/pages/App/router/configuration/emptyLayout.tsx
@@ -1,9 +1,12 @@
-import { PrivacyPolicy } from "@/pages/PrivacyPolicy";
-import { EmptyPage } from "@/pages/empty";
+import React, { lazy } from "react";
 import { ROUTE_PATHS } from "@/shared/constants";
 import { EmptyLayout } from "@/shared/layouts";
 import { LayoutConfiguration } from "../types";
 
+// Wrapping non-default exports for lazy loading
+const EmptyPage = lazy(() => import("@/pages/empty").then(module => ({ default: module.EmptyPage })));
+const PrivacyPolicy = lazy(() => import("@/pages/PrivacyPolicy").then(module => ({ default: module.PrivacyPolicy })));
+
 export const EMPTY_LAYOUT_CONFIGURATION: LayoutConfiguration = {
   component: EmptyLayout,
   routes: [