Lazy loading & improved bundling.

client/package-lock.json

@@ -86,6 +86,7 @@
         "styled-components": "^6.1.8",
         "subscriptions-transport-ws": "^0.11.0",
         "terser-webpack-plugin": "^5.3.10",
+        "vite-plugin-compression": "^0.5.1",
         "vite-plugin-ejs": "^1.7.0",
         "vite-plugin-svgr": "^4.2.0",
         "web-vitals": "^3.5.2",
@@ -26837,6 +26838,96 @@
         "vite": "^2.7.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/vite-plugin-compression": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz",
+      "integrity": "sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "debug": "^4.3.3",
+        "fs-extra": "^10.0.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.0.0"
+      }
+    },
+    "node_modules/vite-plugin-compression/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/vite-plugin-compression/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/vite-plugin-compression/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/vite-plugin-compression/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/vite-plugin-compression/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite-plugin-compression/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/vite-plugin-compression/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/vite-plugin-ejs": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/vite-plugin-ejs/-/vite-plugin-ejs-1.7.0.tgz",

client/package.json

@@ -86,6 +86,7 @@
     "styled-components": "^6.1.8",
     "subscriptions-transport-ws": "^0.11.0",
     "terser-webpack-plugin": "^5.3.10",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-svgr": "^4.2.0",
     "web-vitals": "^3.5.2",

client/src/pages/manage/manage.page.component.jsx

@@ -1,4 +1,4 @@
-import {FloatButton, Layout} from "antd";
+import {FloatButton, Layout, Spin} from "antd";
 // import preval from "preval.macro";
 import React, {lazy, Suspense, useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
@@ -220,95 +220,155 @@ export function Manage({conflict, bodyshop}) {
             <Routes>
                 <Route path='/_test' element={<TestComponent/>}/>
                 <Route path='/' element={<ManageRootPage/>}/>
-                <Route path='/jobs' element={<JobsPage/>}/>
+                <Route path='/jobs' element={
+                  <Suspense fallback={<Spin/>}>
+                <JobsPage/>
+              </Suspense>
+              }/>
                 <Route
                     path='/jobs/:jobId/intake'
-                    element={<JobIntake/>}
+                    element={   <Suspense fallback={<Spin/>}>
+                 <JobIntake/>
+                  </Suspense>}
                 />
                 <Route
                     path='/jobs/:jobId/deliver'
-                    element={<JobDeliver/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <JobDeliver/>
+                    </Suspense>}
                 />
                 <Route
                     path='/jobs/:jobId/checklist'
-                    element={<JobChecklistView/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <JobChecklistView/>
+                    </Suspense>}
                 />
                 <Route
                     path='/jobs/:jobId/close'
-                    element={<JobsClose/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <JobsClose/>
+                    </Suspense>}
                 />
                 <Route
                     path='/jobs/:jobId/admin'
-                    element={<JobsAdmin/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <JobsAdmin/>
+                    </Suspense>}
                 />
-                <Route path='/jobs/all' element={<AllJobs/>}/>
+                <Route path='/jobs/all' element={<Suspense fallback={<Spin/>}>
-                <Route path='/jobs/ready' element={<ReadyJobs/>}/>
+                 <AllJobs/>
+                </Suspense>}/>
+                <Route path='/jobs/ready' element={<Suspense fallback={<Spin/>}>
+                 <ReadyJobs/>
+                </Suspense>}/>
                 <Route
                     path='/jobs/new'
-                    element={<JobsCreateContainerPage/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <JobsCreateContainerPage/>
+                    </Suspense>}
                 />
-                <Route path='/jobs/:jobId' element={<JobsDetailPage/>}/>
+                <Route path='/jobs/:jobId' element={<Suspense fallback={<Spin/>}>
-                <Route path='/temporarydocs/' element={<TempDocs/>}/>
+                 <JobsDetailPage/>
+                </Suspense>}/>
+                <Route path='/temporarydocs/' element={<Suspense fallback={<Spin/>}>
+                 <TempDocs/>
+                </Suspense>}/>
                 <Route
                     path='/inventory/'
-                    element={<InventoryListPage/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <InventoryListPage/>
+                    </Suspense>}
                 />
                 <Route
                     path='/courtesycars/'
-                    element={<CourtesyCarsPage/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <CourtesyCarsPage/>
+                    </Suspense>}
                 />
                 <Route
                     path='/courtesycars/new'
-                    element={<CourtesyCarCreateContainer/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <CourtesyCarCreateContainer/>
+                    </Suspense>}
                 />
                 <Route
                     path='/courtesycars/contracts'
-                    element={<ContractsList/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <ContractsList/>
+                    </Suspense>}
                 />
                 <Route
                     path='/courtesycars/contracts/new'
-                    element={<ContractCreatePage/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <ContractCreatePage/>
+                    </Suspense>}
                 />
                 <Route
                     path='/courtesycars/contracts/:contractId'
-                    element={<ContractDetailPage/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <ContractDetailPage/>
+                    </Suspense>}
                 />
                 <Route
                     path='/courtesycars/:ccId'
-                    element={<CourtesyCarDetailContainer/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <CourtesyCarDetailContainer/>
+                    </Suspense>}
                 />
-                <Route path='/profile' element={<ProfilePage/>}/>
+                <Route path='/profile' element={<Suspense fallback={<Spin/>}>
+                 <ProfilePage/>
+                </Suspense>}/>
                 <Route
                     path='/vehicles'
-                    element={<VehiclesContainer/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <VehiclesContainer/>
+                    </Suspense>}
                 />
                 <Route
                     path='/production/list'
-                    element={<ProductionListPage/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <ProductionListPage/>
+                    </Suspense>}
                 />
                 <Route
                     path='/production/board'
-                    element={<ProductionBoardPage/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <ProductionBoardPage/>
+                    </Suspense>}
                 />
                 <Route
                     path='/vehicles/:vehId'
-                    element={<VehiclesDetailContainer/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <VehiclesDetailContainer/>
+                    </Suspense>}
                 />
-                <Route path='/bills' element={<BillsListPage/>}/>
+                <Route path='/bills' element={<Suspense fallback={<Spin/>}>
-                <Route path='/owners' element={<OwnersContainer/>}/>
+                 <BillsListPage/>
+                </Suspense>}/>
+                <Route path='/owners' element={<Suspense fallback={<Spin/>}>
+                 <OwnersContainer/>
+                </Suspense>}/>
                 <Route
                     path='/owners/:ownerId'
-                    element={<OwnersDetailContainer/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <OwnersDetailContainer/>
+                    </Suspense>}
                 />
                 <Route
                     path='/schedule'
-                    element={<ScheduleContainer/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <ScheduleContainer/>
+                    </Suspense>}
                 />
                 <Route
                     path='/available'
-                    element={<JobsAvailablePage/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <JobsAvailablePage/>
+                    </Suspense>}
                 />
-                <Route path='/shop' element={<ShopPage/>}/>
+                <Route path='/shop' element={<Suspense fallback={<Spin/>}>
+                 <ShopPage/>
+                </Suspense>}/>
                 {
                     //   <Route
                     // path='/shop/templates'
@@ -317,50 +377,86 @@ export function Manage({conflict, bodyshop}) {
                 }
                 <Route
                     path='/shop/vendors'
-                    element={<ShopVendorPageContainer/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <ShopVendorPageContainer/>
+                    </Suspense>}
                 />
                 <Route
                     path='/shop/csi'
-                    element={<ShopCsiPageContainer/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <ShopCsiPageContainer/>
+                    </Suspense>}
                 />
 
                 <Route
                     path='/accounting/qbo'
-                    element={<AccountingQboCallback/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <AccountingQboCallback/>
+                    </Suspense>}
                 />
 
                 <Route
                     path='/accounting/receivables'
-                    element={<AccountingReceivables/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <AccountingReceivables/>
+                    </Suspense>}
                 />
                 <Route
                     path='/accounting/payables'
-                    element={<AccountingPayables/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <AccountingPayables/>
+                    </Suspense>}
                 />
                 <Route
                     path='/accounting/payments'
-                    element={<AccountingPayments/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <AccountingPayments/>
+                    </Suspense>}
                 />
                 <Route
                     path='/accounting/exportlogs'
-                    element={<ExportLogs/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <ExportLogs/>
+                    </Suspense>}
                 />
-                <Route path='/ttapprovals' element={<TtApprovals/>}/>
+                <Route path='/ttapprovals' element={<Suspense fallback={<Spin/>}>
-                <Route path='/partsqueue' element={<PartsQueue/>}/>
+                 <TtApprovals/>
-                <Route path='/phonebook' element={<Phonebook/>}/>
+                </Suspense>}/>
+                <Route path='/partsqueue' element={<Suspense fallback={<Spin/>}>
+                 <PartsQueue/>
+                </Suspense>}/>
+                <Route path='/phonebook' element={<Suspense fallback={<Spin/>}>
+                 <Phonebook/>
+                </Suspense>}/>
 
-                <Route path='/payments' element={<PaymentsAll/>}/>
+                <Route path='/payments' element={<Suspense fallback={<Spin/>}>
-                <Route path='/shiftclock' element={<ShiftClock/>}/>
+                 <PaymentsAll/>
-                <Route path='/scoreboard' element={<Scoreboard/>}/>
+                </Suspense>}/>
+                <Route path='/shiftclock' element={<Suspense fallback={<Spin/>}>
+                 <ShiftClock/>
+                </Suspense>}/>
+                <Route path='/scoreboard' element={<Suspense fallback={<Spin/>}>
+                 <Scoreboard/>
+                </Suspense>}/>
                 <Route
                     path='/timetickets'
-                    element={<TimeTicketsAll/>}
+                    element={<Suspense fallback={<Spin/>}>
+                 <TimeTicketsAll/>
+                    </Suspense>}
                 />
-                <Route path='/help' element={<Help/>}/>
+                <Route path='/help' element={<Suspense fallback={<Spin/>}>
+                 <Help/>
+                </Suspense>}/>
                 <Route path='/emailtest' element={<EmailTest/>}/>
-                <Route path='/dashboard' element={<Dashboard/>}/>
+                <Route path='/dashboard' element={<Suspense fallback={<Spin/>}>
-                <Route path='/dms' element={<Dms/>}/>
+                 <Dashboard/>
-                <Route path='/dmsap' element={<DmsPayables/>}/>
+                </Suspense>}/>
+                <Route path='/dms' element={<Suspense fallback={<Spin/>}>
+                 <Dms/>
+                </Suspense>}/>
+                <Route path='/dmsap' element={<Suspense fallback={<Spin/>}>
+                 <DmsPayables/>
+                </Suspense>}/>
             </Routes>
         </Suspense>
     );

client/src/utils/instanceRenderMgr.js

@@ -17,7 +17,7 @@ export default function InstanceRenderManager({ executeFunction, rome, promanage
       propToReturn = imex;
       break;
     case 'ROME':
-      propToReturn = rome;
+      propToReturn = rome;  //TODO:AIO Implement USE_IMEX
       break;
     case 'PROMANAGER':
       //Return the rome prop if USE_ROME.

client/vite.config.js

@@ -5,6 +5,7 @@ import * as path from 'path';
 import * as url from 'url';
 import { defineConfig } from 'vite';
 import { ViteEjsPlugin } from 'vite-plugin-ejs';
+import CompressionPlugin from 'vite-plugin-compression';
 
 process.env.VITE_APP_GIT_SHA_DATE = new Date().toLocaleString('en-US', {
   timeZone: 'America/Los_Angeles',
@@ -42,13 +43,26 @@ export default defineConfig({
 
     reactVirtualized(),
     react(),
+    CompressionPlugin(),
   ],
   server: {
     host: true,
     port: 3000,
     open: true,
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          antd: ['antd'],
+          'react-redux': ['react-redux'],
+          redux: ['redux'],
+        },
+      },
+    },
+  },
   optimizeDeps: {
+    include: ['react', 'react-dom', 'antd', '@apollo/client', '@reduxjs/toolkit', 'axios'],
     esbuildOptions: {
       loader: {
         '.js': 'jsx',