From 67319ef61d181907b4cf07c79d6af7e0bed8492a Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Fri, 28 Jun 2024 07:09:41 +0300
Subject: [PATCH] feat: add page lazy loading

---
 .../model/providers/RouterProvider/index.tsx  | 23 +++++++++++++++----
 src/pages/AnalyzePage/index.ts                |  5 +++-
 src/pages/PaymentsPage/index.ts               |  5 +++-
 src/pages/SchedulePage/index.ts               |  5 +++-
 webpack.config.ts                             | 14 ++++++-----
 5 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/apps/MoneyControllApp/model/providers/RouterProvider/index.tsx b/src/apps/MoneyControllApp/model/providers/RouterProvider/index.tsx
index 0f4d86a..fe5b5aa 100644
--- a/src/apps/MoneyControllApp/model/providers/RouterProvider/index.tsx
+++ b/src/apps/MoneyControllApp/model/providers/RouterProvider/index.tsx
@@ -1,6 +1,8 @@
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
 import PieChartIcon from '@mui/icons-material/PieChart';
+import { CircularProgress } from '@mui/material';
+import { Suspense } from 'react';
 import { createBrowserRouter, Navigate, RouterProvider as RRDRouterProvider } from 'react-router-dom';
 
 // todo lazy & access
@@ -12,6 +14,7 @@ import { SchedulePage, SchedulePageToolbar } from 'pages/SchedulePage';
 import { AsideMenuLayout } from 'widgets/AsideMenuLayout';
 
 import type { ReactNode } from 'react';
+import type { RouteObject } from 'react-router-dom';
 
 type PageListItem = {
   icon: ReactNode;
@@ -26,26 +29,38 @@ const pages: PageListItem[] = [
     icon: <PieChartIcon />,
     title: 'Аналитика',
     path: '/analyze',
-    Content: <AnalyzePage />,
+    Content: (
+      <Suspense fallback={<CircularProgress />}>
+        <AnalyzePage />
+      </Suspense>
+    ),
     Toolbar: <AnalyzePageToolbar />,
   },
   {
     icon: <CalendarMonthIcon />,
     title: 'График платежей',
     path: '/schedule',
-    Content: <SchedulePage />,
+    Content: (
+      <Suspense fallback={<CircularProgress />}>
+        <SchedulePage />
+      </Suspense>
+    ),
     Toolbar: <SchedulePageToolbar />,
   },
   {
     icon: <FormatListBulletedIcon />,
     title: 'Список платежей',
     path: '/payments',
-    Content: <PaymentsPage />,
+    Content: (
+      <Suspense fallback={<CircularProgress />}>
+        <PaymentsPage />
+      </Suspense>
+    ),
     Toolbar: <PaymentsPageToolbar />,
   },
 ];
 
-const routes = pages.map((page) => ({
+const routes: RouteObject[] = pages.map((page) => ({
   path: page.path,
   element: (
     <AsideMenuLayout
diff --git a/src/pages/AnalyzePage/index.ts b/src/pages/AnalyzePage/index.ts
index ad8be7d..26b2285 100644
--- a/src/pages/AnalyzePage/index.ts
+++ b/src/pages/AnalyzePage/index.ts
@@ -1,2 +1,5 @@
-export { default as AnalyzePage } from './ui/AnalyzePage.ui';
+import { lazy } from 'react';
+
+const LazyAnalyzePage = lazy(async () => import('./ui/AnalyzePage.ui'));
+export { LazyAnalyzePage as AnalyzePage };
 export { default as AnalyzePageToolbar } from './ui/AnalyzePageToolbar.ui';
diff --git a/src/pages/PaymentsPage/index.ts b/src/pages/PaymentsPage/index.ts
index df8f217..ad143f7 100644
--- a/src/pages/PaymentsPage/index.ts
+++ b/src/pages/PaymentsPage/index.ts
@@ -1,2 +1,5 @@
-export { default as PaymentsPage } from './ui/PaymentsPage.ui';
+import { lazy } from 'react';
+
+const LazyPaymentsPage = lazy(async () => import('./ui/PaymentsPage.ui'));
+export { LazyPaymentsPage as PaymentsPage };
 export { default as PaymentsPageToolbar } from './ui/PaymentsPageToolbar.ui';
diff --git a/src/pages/SchedulePage/index.ts b/src/pages/SchedulePage/index.ts
index 3e6515a..70e9136 100644
--- a/src/pages/SchedulePage/index.ts
+++ b/src/pages/SchedulePage/index.ts
@@ -1,2 +1,5 @@
-export { default as SchedulePage } from './ui/SchedulePage.ui';
+import { lazy } from 'react';
+
+const LazySchedulePage = lazy(async () => import('./ui/SchedulePage.ui'));
+export { LazySchedulePage as SchedulePage };
 export { default as SchedulePageToolbar } from './ui/SchedulePageToolbar.ui';
diff --git a/webpack.config.ts b/webpack.config.ts
index b6c3710..813803c 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -31,13 +31,15 @@ const config = (env: WebpackEnv) => {
     },
   });
 
-  const swPlugin = new InjectManifest({
-    swSrc: './src/src-sw.js',
-    swDest: 'sw.js',
-  });
+  if (env.mode === 'production') {
+    const swPlugin = new InjectManifest({
+      swSrc: './src/src-sw.js',
+      swDest: 'sw.js',
+    });
 
-  // @ts-ignore
-  baseConfig.plugins.push(swPlugin);
+    // @ts-ignore
+    baseConfig.plugins.push(swPlugin);
+  }
 
   return baseConfig;
 };