From e5c1285f908b06278bc484c20c7adf0dc1c3a128 Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Wed, 20 Mar 2024 15:16:21 +0300
Subject: [PATCH] feat: lazy loading

---
 package.json |   1 +
 src/App.tsx  | 114 +++++++++++++++++++++++++++++++--------------------
 yarn.lock    |   5 +++
 3 files changed, 76 insertions(+), 44 deletions(-)

diff --git a/package.json b/package.json
index 4bc6b673..7126f652 100755
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "react-error-boundary": "^4.0.11",
     "react-image-crop": "^10.1.5",
     "react-image-file-resizer": "^0.4.8",
+    "react-lazily": "^0.9.2",
     "react-rnd": "^10.4.1",
     "react-router-dom": "^6.6.2",
     "react-scripts": "5.0.1",
diff --git a/src/App.tsx b/src/App.tsx
index 484f2fdf..00332eb7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,10 @@
+import { Suspense, lazy } from "react";
+import { lazily } from "react-lazily";
 import ContactFormModal from "@ui_kit/ContactForm";
-import ImageCrop from "@ui_kit/Modal/ImageCrop";
 import dayjs from "dayjs";
 import "dayjs/locale/ru";
 import SigninDialog from "./pages/auth/Signin";
 import SignupDialog from "./pages/auth/Signup";
-import ViewPage from "./pages/ViewPublicationPage";
-import { DesignPage } from "./pages/DesignPage/DesignPage";
 import {
   Route,
   Routes,
@@ -14,16 +13,8 @@ import {
   Navigate,
 } from "react-router-dom";
 import "./index.css";
-import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
-import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
 import Landing from "./pages/Landing/Landing";
-import QuestionsPage from "./pages/Questions/QuestionsPage";
-import { Result } from "./pages/ResultPage/Result";
-import { ResultSettings } from "./pages/ResultPage/ResultSettings";
-import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
 import Main from "./pages/main";
-import EditPage from "./pages/startPage/EditPage";
-import { Tariffs } from "./pages/Tariffs/Tariffs";
 import {
   clearAuthToken,
   getMessageFromFetchError,
@@ -50,13 +41,48 @@ import { isAxiosError } from "axios";
 import { useEffect, useLayoutEffect, useRef } from "react";
 import RecoverPassword from "./pages/auth/RecoverPassword";
 import OutdatedLink from "./pages/auth/OutdatedLink";
-import { QuizAnswersPage } from "./pages/QuizAnswersPage/QuizAnswersPage";
 
 import type { OriginalUserAccount } from "@root/user";
-import ChatImageNewWindow from "@ui_kit/FloatingSupportChat/ChatImageNewWindow";
-import Analytics from "./pages/Analytics/Analytics";
 
-export function useUserAccountFetcher<T = UserAccount>({
+import type { SuspenseProps } from "react";
+
+const MyQuizzesFull = lazy(() => import("./pages/createQuize/MyQuizzesFull"));
+const ViewPage = lazy(() => import("./pages/ViewPublicationPage"));
+const Analytics = lazy(() => import("./pages/Analytics/Analytics"));
+const EditPage = lazy(() => import("./pages/startPage/EditPage"));
+const { Tariffs } = lazily(() => import("./pages/Tariffs/Tariffs"));
+const { DesignPage } = lazily(() => import("./pages/DesignPage/DesignPage"));
+const { QuizAnswersPage } = lazily(
+  () => import("./pages/QuizAnswersPage/QuizAnswersPage"),
+);
+const ChatImageNewWindow = lazy(
+  () => import("@ui_kit/FloatingSupportChat/ChatImageNewWindow"),
+);
+
+dayjs.locale("ru");
+
+const routeslink = [
+  {
+    path: "/edit",
+    page: EditPage,
+    header: true,
+    sidebar: true,
+    footer: true,
+  },
+  {
+    path: "/design",
+    page: DesignPage,
+    header: true,
+    sidebar: true,
+    footer: true,
+  },
+] as const;
+
+const LazyLoading = ({ children, fallback }: SuspenseProps) => (
+  <Suspense fallback={fallback ?? <></>}>{children}</Suspense>
+);
+
+function useUserAccountFetcher<T = UserAccount>({
   onError,
   onNewUserAccount,
   url,
@@ -108,25 +134,6 @@ export function useUserAccountFetcher<T = UserAccount>({
   }, [url, userId]);
 }
 
-dayjs.locale("ru");
-
-const routeslink = [
-  {
-    path: "/edit",
-    page: EditPage,
-    header: true,
-    sidebar: true,
-    footer: true,
-  },
-  {
-    path: "/design",
-    page: DesignPage,
-    header: true,
-    sidebar: true,
-    footer: true,
-  },
-] as const;
-
 export default function App() {
   const userId = useUserStore((state) => state.userId);
   const location = useLocation();
@@ -240,11 +247,26 @@ export default function App() {
             />
           }
         />
-        <Route path="/list" element={<MyQuizzesFull />} />
-        <Route path={"/view/:quizId"} element={<ViewPage />} />
-        <Route path={"/tariffs"} element={<Tariffs />} />
-        <Route path={"/analytics"} element={<Analytics/>}/>
-        <Route path={"/results/:quizId"} element={<QuizAnswersPage />} />
+        <Route
+          path="/list"
+          element={<LazyLoading children={<MyQuizzesFull />} />}
+        />
+        <Route
+          path={"/view/:quizId"}
+          element={<LazyLoading children={<ViewPage />} />}
+        />
+        <Route
+          path={"/tariffs"}
+          element={<LazyLoading children={<Tariffs />} />}
+        />
+        <Route
+          path={"/analytics"}
+          element={<LazyLoading children={<Analytics />} />}
+        />
+        <Route
+          path={"/results/:quizId"}
+          element={<LazyLoading children={<QuizAnswersPage />} />}
+        />
         <Route element={<PrivateRoute />}>
           <Route path={"/image/:srcImage"} element={<ChatImageNewWindow />} />
           {routeslink.map((e, i) => (
@@ -252,11 +274,15 @@ export default function App() {
               key={i}
               path={e.path}
               element={
-                <Main
-                  Page={e.page}
-                  header={e.header}
-                  sidebar={e.sidebar}
-                  footer={e.footer}
+                <LazyLoading
+                  children={
+                    <Main
+                      Page={e.page}
+                      header={e.header}
+                      sidebar={e.sidebar}
+                      footer={e.footer}
+                    />
+                  }
                 />
               }
             />
diff --git a/yarn.lock b/yarn.lock
index 8d33937f..8860a5d4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9525,6 +9525,11 @@ react-is@^18.0.0, react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-lazily@^0.9.2:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/react-lazily/-/react-lazily-0.9.2.tgz#74596dbde43c8e0f607445da5c4839cf6cc48ab5"
+  integrity sha512-oBVRDQ+SuMPWenBO/0Kq+iZk34lOYJEmjiTto4bYRufndf8pux3E50BT3mJZbsq0vBsAVbX3fpQjlUvsXgDVag==
+
 react-redux@^7.2.0:
   version "7.2.9"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"