From c9fe6d9b3707868c9ed813b20bbb7e0e860d7884 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 26 Aug 2024 22:51:40 +0200
Subject: [PATCH] feat: Optimize loading perf. by spliting big chunks and lazy
 loading them

---
 packages/webapp/src/components/App.tsx        | 11 ++-
 .../Authentication/AuthenticationPage.tsx     | 10 +++
 packages/webapp/src/routes/preferences.tsx    | 70 +++++++++++--------
 3 files changed, 53 insertions(+), 38 deletions(-)
 create mode 100644 packages/webapp/src/containers/Authentication/AuthenticationPage.tsx

diff --git a/packages/webapp/src/components/App.tsx b/packages/webapp/src/components/App.tsx
index 1a78ef10e..4c1703dd6 100644
--- a/packages/webapp/src/components/App.tsx
+++ b/packages/webapp/src/components/App.tsx
@@ -12,7 +12,6 @@ import AppIntlLoader from './AppIntlLoader';
 import { EnsureAuthenticated } from '@/components/Guards/EnsureAuthenticated';
 import GlobalErrors from '@/containers/GlobalErrors/GlobalErrors';
 import DashboardPrivatePages from '@/components/Dashboard/PrivatePages';
-import { Authentication } from '@/containers/Authentication/Authentication';
 
 import LazyLoader from '@/components/LazyLoader';
 import { SplashScreen, DashboardThemeProvider } from '../components';
@@ -21,6 +20,9 @@ import { EnsureUserEmailVerified } from './Guards/EnsureUserEmailVerified';
 import { EnsureAuthNotAuthenticated } from './Guards/EnsureAuthNotAuthenticated';
 import { EnsureUserEmailNotVerified } from './Guards/EnsureUserEmailNotVerified';
 
+const  AuthenticationPage = LazyLoader({
+  loader: () => import('@/containers/Authentication/AuthenticationPage'),
+});
 const EmailConfirmation = LazyLoader({
   loader: () => import('@/containers/Authentication/EmailConfirmation'),
 });
@@ -53,12 +55,7 @@ function AppInsider({ history }) {
               <EmailConfirmation />
             </Route>
 
-            <Route path={'/auth'}>
-              <EnsureAuthNotAuthenticated>
-                <Authentication />
-              </EnsureAuthNotAuthenticated>
-            </Route>
-
+            <Route path={'/auth'} children={<AuthenticationPage />} />
             <Route path={'/'}>
               <EnsureAuthenticated>
                 <EnsureUserEmailVerified>
diff --git a/packages/webapp/src/containers/Authentication/AuthenticationPage.tsx b/packages/webapp/src/containers/Authentication/AuthenticationPage.tsx
new file mode 100644
index 000000000..522d157c1
--- /dev/null
+++ b/packages/webapp/src/containers/Authentication/AuthenticationPage.tsx
@@ -0,0 +1,10 @@
+import { EnsureAuthNotAuthenticated } from "@/components/Guards/EnsureAuthNotAuthenticated";
+import { Authentication } from "./Authentication";
+
+export default function AuthenticationPage() {
+  return (
+    <EnsureAuthNotAuthenticated>
+      <Authentication />
+    </EnsureAuthNotAuthenticated>
+  );
+}
diff --git a/packages/webapp/src/routes/preferences.tsx b/packages/webapp/src/routes/preferences.tsx
index 58f69f77f..1ad831aea 100644
--- a/packages/webapp/src/routes/preferences.tsx
+++ b/packages/webapp/src/routes/preferences.tsx
@@ -1,88 +1,96 @@
 // @ts-nocheck
 import { lazy } from 'react';
-import General from '@/containers/Preferences/General/General';
-import Users from '../containers/Preferences/Users/Users';
-import Roles from '../containers/Preferences/Users/Roles/RolesForm/RolesFormPage';
-import Accountant from '@/containers/Preferences/Accountant/Accountant';
-import Currencies from '@/containers/Preferences/Currencies/Currencies';
-import Item from '@/containers/Preferences/Item';
-// import SMSIntegration from '../containers/Preferences/SMSIntegration';
-import DefaultRoute from '../containers/Preferences/DefaultRoute';
-import Warehouses from '../containers/Preferences/Warehouses';
-import Branches from '../containers/Preferences/Branches';
-import Invoices from '../containers/Preferences/Invoices/PreferencesInvoices';
-import { PreferencesCreditNotes } from '../containers/Preferences/CreditNotes/PreferencesCreditNotes';
-import { PreferencesEstimates } from '@/containers/Preferences/Estimates/PreferencesEstimates';
-import { PreferencesReceipts } from '@/containers/Preferences/Receipts/PreferencesReceipts';
-
-import BillingPage from '@/containers/Subscriptions/BillingPage';
 
 const BASE_URL = '/preferences';
 
 export default [
   {
     path: `${BASE_URL}/general`,
-    component: General,
+    component: lazy(() => import('@/containers/Preferences/General/General')),
     exact: true,
   },
   {
     path: `${BASE_URL}/users`,
-    component: Users,
+    component: lazy(() => import('../containers/Preferences/Users/Users')),
     exact: true,
   },
   {
     path: `${BASE_URL}/invoices`,
-    component: Invoices,
+    component: lazy(
+      () => import('../containers/Preferences/Invoices/PreferencesInvoices'),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/credit-notes`,
-    component: PreferencesCreditNotes,
+    component: lazy(() =>
+      import(
+        '../containers/Preferences/CreditNotes/PreferencesCreditNotes'
+      ).then((module) => ({ default: module.PreferencesCreditNotes })),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/estimates`,
-    component: PreferencesEstimates,
+    component: lazy(() =>
+      import('@/containers/Preferences/Estimates/PreferencesEstimates').then(
+        (module) => ({ default: module.PreferencesEstimates }),
+      ),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/receipts`,
-    component: PreferencesReceipts,
+    component: lazy(() =>
+      import('@/containers/Preferences/Receipts/PreferencesReceipts').then(
+        (module) => ({ default: module.PreferencesReceipts }),
+      ),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/roles`,
-    component: Roles,
+    component: lazy(
+      () =>
+        import('../containers/Preferences/Users/Roles/RolesForm/RolesFormPage'),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/roles/:id`,
-    component: Roles,
+    component: lazy(
+      () =>
+        import('../containers/Preferences/Users/Roles/RolesForm/RolesFormPage'),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/currencies`,
-    component: Currencies,
+    component: lazy(
+      () => import('@/containers/Preferences/Currencies/Currencies'),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/warehouses`,
-    component: Warehouses,
+    component: lazy(() => import('../containers/Preferences/Warehouses')),
     exact: true,
   },
   {
     path: `${BASE_URL}/branches`,
-    component: Branches,
+    component: lazy(() => import('../containers/Preferences/Branches')),
     exact: true,
   },
   {
     path: `${BASE_URL}/accountant`,
-    component: Accountant,
+    component: lazy(
+      () => import('@/containers/Preferences/Accountant/Accountant'),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/items`,
-    component: Item,
+    component: lazy(() => import('@/containers/Preferences/Item')),
     exact: true,
   },
   // {
@@ -92,12 +100,12 @@ export default [
   // },
   {
     path: `${BASE_URL}/billing`,
-    component: BillingPage,
+    component: lazy(() => import('@/containers/Subscriptions/BillingPage')),
     exact: true,
   },
   {
     path: `${BASE_URL}/`,
-    component: DefaultRoute,
+    component: lazy(() => import('../containers/Preferences/DefaultRoute')),
     exact: true,
   },
 ];