Lazy loading & improved bundling.

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/ready' element={<ReadyJobs/>}/>
+                <Route path='/jobs/all' element={<Suspense fallback={<Spin/>}>
+                 <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='/temporarydocs/' element={<TempDocs/>}/>
+                <Route path='/jobs/:jobId' element={<Suspense fallback={<Spin/>}>
+                 <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='/owners' element={<OwnersContainer/>}/>
+                <Route path='/bills' element={<Suspense fallback={<Spin/>}>
+                 <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='/partsqueue' element={<PartsQueue/>}/>
-                <Route path='/phonebook' element={<Phonebook/>}/>
+                <Route path='/ttapprovals' element={<Suspense fallback={<Spin/>}>
+                 <TtApprovals/>
+                </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='/shiftclock' element={<ShiftClock/>}/>
-                <Route path='/scoreboard' element={<Scoreboard/>}/>
+                <Route path='/payments' element={<Suspense fallback={<Spin/>}>
+                 <PaymentsAll/>
+                </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='/dms' element={<Dms/>}/>
-                <Route path='/dmsap' element={<DmsPayables/>}/>
+                <Route path='/dashboard' element={<Suspense fallback={<Spin/>}>
+                 <Dashboard/>
+                </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.