feat(admin-ui): lazy load app components

Signed-off-by: Jeet Viramgama <jviramgama5@gmail.com>

admin-ui/app/layout/components/DefaultSidebar.js

@@ -1,10 +1,12 @@
-import React from 'react'
+import React, { Suspense, lazy } from 'react'
 import { Link } from 'react-router-dom'
 import { Sidebar, SidebarTrigger } from 'Components'
 import { LogoThemed } from 'Routes/components/LogoThemed/LogoThemed'
-import GluuAppSidebar from 'Routes/Apps/Gluu/GluuAppSidebar'
+import GluuSuspenseLoader from 'Routes/Apps/Gluu/GluuSuspenseLoader'
 
-export const DefaultSidebar = () => (
+const GluuAppSidebar = lazy(() => import('Routes/Apps/Gluu/GluuAppSidebar'))
+
+const DefaultSidebar = () => (
   <Sidebar>
     {/* START SIDEBAR-OVERLAY: Close (x) */}
     <Sidebar.Close>
@@ -29,9 +31,11 @@ export const DefaultSidebar = () => (
       {/* <SidebarTopA /> */}
       <Sidebar.Section fluid cover>
         {/* SIDEBAR: Menu */}
-        <GluuAppSidebar />
+        <Suspense fallback={<GluuSuspenseLoader />}><GluuAppSidebar /></Suspense>
       </Sidebar.Section>
     </Sidebar.MobileFluid>
     {/* END SIDEBAR: Only for Mobile */}
   </Sidebar>
 )
+
+export default DefaultSidebar

admin-ui/app/routes/Apps/Gluu/GluuSuspenseLoader.js

@@ -0,0 +1,10 @@
+import { CircularProgress } from '@mui/material'
+import React from 'react'
+
+const GluuSuspenseLoader = () => {
+  return (
+    <CircularProgress />
+  )
+}
+
+export default GluuSuspenseLoader

admin-ui/app/routes/Layouts/SidebarWithNavbar/index.js

@@ -2,9 +2,7 @@ import { SidebarWithNavbar } from './SidebarWithNavbar'
 import {
   SidebarWithNavbarNavbar
 } from './../../../layout/components/SidebarWithNavbarNavbar'
-import {
-  DefaultSidebar
-} from './../../../layout/components/DefaultSidebar'
+import DefaultSidebar from './../../../layout/components/DefaultSidebar'
 
 SidebarWithNavbar.Navbar = SidebarWithNavbarNavbar
 SidebarWithNavbar.Sidebar = DefaultSidebar

admin-ui/app/routes/index.js

@@ -1,26 +1,25 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, lazy, Suspense } from 'react'
 import { Route, Routes, Navigate } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 
-// ----------- Pages Imports ---------------
-import Reports from './Dashboards/Reports'
-import DashboardPage from './Dashboards/DashboardPage'
-import HealthPage from './Health/HealthPage'
-import LicenseDetailsPage from './License/LicenseDetailsPage'
 import NavbarOnly from './Layouts/NavbarOnly'
 import SidebarDefault from './Layouts/SidebarDefault'
 import SidebarA from './Layouts/SidebarA'
 import SidebarWithNavbar from './Layouts/SidebarWithNavbar'
 
-import ProfilePage from './Apps/Profile/ProfilePage'
 // ----------- Layout Imports ---------------
-import { DefaultSidebar } from './../layout/components/DefaultSidebar'
-import ByeBye from './Pages/ByeBye'
-
-import Gluu404Error from './Apps/Gluu/Gluu404Error'
-import GluuNavBar from './Apps/Gluu/GluuNavBar'
 import { processRoutes } from 'Plugins/PluginMenuResolver'
 import { hasPermission } from 'Utils/PermChecker'
+import GluuSuspenseLoader from 'Routes/Apps/Gluu/GluuSuspenseLoader'
+
+const DashboardPage = lazy(() => import('./Dashboards/DashboardPage'))
+const HealthPage = lazy(() => import('./Health/HealthPage'))
+const LicenseDetailsPage = lazy(() => import('./License/LicenseDetailsPage'))
+const ProfilePage = lazy(() => import('./Apps/Profile/ProfilePage'))
+const Gluu404Error = lazy(() => import('./Apps/Gluu/Gluu404Error'))
+const ByeBye = lazy(() => import('./Pages/ByeBye'))
+const GluuNavBar = lazy(() => import('./Apps/Gluu/GluuNavBar'))
+const DefaultSidebar = lazy(() => import('./../layout/components/DefaultSidebar'))
 
 //------ Route Definitions --------
 // eslint-disable-next-line no-unused-vars
@@ -35,10 +34,10 @@ export const RoutedContent = () => {
 
   return (
     <Routes>
-      <Route path="/home/dashboard" element={<DashboardPage />} />
+      <Route path="/home/dashboard" element={<Suspense fallback={<GluuSuspenseLoader />}><DashboardPage /></Suspense>} />
       <Route path="/" element={ <Navigate to="/home/dashboard" /> } />
-      <Route path="/home/health" element={<HealthPage />} />
-      <Route path="/home/licenseDetails" element={<LicenseDetailsPage />} />
+      <Route path="/home/health" element={<Suspense fallback={<GluuSuspenseLoader />}><HealthPage /></Suspense>} />
+      <Route path="/home/licenseDetails" element={<Suspense fallback={<GluuSuspenseLoader />}><LicenseDetailsPage /></Suspense>} />
       {/*    Layouts     */}
       <Route path="/layouts/navbar" element={<NavbarOnly />} />
       <Route path="/layouts/sidebar" element={<SidebarDefault />} />
@@ -56,9 +55,9 @@ export const RoutedContent = () => {
           ),
       )}
       {/*    Pages Routes    */}
-      <Route element={<ProfilePage />} path="/profile" />
-      <Route element={<ByeBye />} path="/logout" />
-      <Route element={<Gluu404Error />} path="/error-404" />
+      <Route element={<Suspense fallback={<GluuSuspenseLoader />}><ProfilePage /></Suspense>} path="/profile" />
+      <Route element={<Suspense fallback={<GluuSuspenseLoader />}><ByeBye /></Suspense>} path="/logout" />
+      <Route element={<Suspense fallback={<GluuSuspenseLoader />}><Gluu404Error /></Suspense>} path="/error-404" />
 
       {/*    404    */}
       <Route path="*" element={ <Navigate to="/error-404" /> } />
@@ -72,14 +71,14 @@ export const RoutedNavbars = () => (
     <Route
       path="/*"
       element={
-        <GluuNavBar themeStyle="color" themeColor="primary" navStyle="accent" />
+        <Suspense fallback={<GluuSuspenseLoader />}><GluuNavBar themeStyle="color" themeColor="primary" navStyle="accent" /></Suspense>
       }
     />
   </Routes>
 )
 
 export const RoutedSidebars = () => (
   <Routes>
-    <Route path="/*" element={<DefaultSidebar />} />
+    <Route path="/*" element={<Suspense fallback={<GluuSuspenseLoader />}><DefaultSidebar /></Suspense>} />
   </Routes>
 )

admin-ui/plugins/admin/components/CustomScripts/CustomScriptForm.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { Suspense, lazy, useState } from 'react'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
 import Toggle from 'react-toggle'
@@ -12,18 +12,20 @@ import {
 } from 'Components'
 import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
 import GluuInumInput from 'Routes/Apps/Gluu/GluuInumInput'
-import GluuInputEditor from 'Routes/Apps/Gluu/GluuInputEditor'
 import GluuProperties from 'Routes/Apps/Gluu/GluuProperties'
-import Counter from 'Components/Widgets/GroupedButtons/Counter'
 import GluuCommitFooter from 'Routes/Apps/Gluu/GluuCommitFooter'
 import GluuCommitDialog from 'Routes/Apps/Gluu/GluuCommitDialog'
 import GluuTooltip from 'Routes/Apps/Gluu/GluuTooltip'
 import { SCRIPT } from 'Utils/ApiResources'
 import { useTranslation } from 'react-i18next'
 import items from './scriptTypes'
-import GluuScriptErrorModal from "../../../../app/routes/Apps/Gluu/GluuScriptErrorModal";
 import { Alert, Button } from "reactstrap";
 import ErrorIcon from '@mui/icons-material/Error';
+import GluuSuspenseLoader from 'Routes/Apps/Gluu/GluuSuspenseLoader'
+
+const GluuScriptErrorModal = lazy(() => import('Routes/Apps/Gluu/GluuScriptErrorModal'))
+const Counter = lazy(() => import('Components/Widgets/GroupedButtons/Counter'))
+const GluuInputEditor = lazy(() => import('Routes/Apps/Gluu/GluuInputEditor'))
 
 function CustomScriptForm({ item, scripts, handleSubmit, viewOnly }) {
   const { t } = useTranslation()
@@ -278,11 +280,13 @@ function CustomScriptForm({ item, scripts, handleSubmit, viewOnly }) {
   return (
     <>
       {isModalOpen && (
-        <GluuScriptErrorModal
-          isOpen={isModalOpen}
-          error={item.scriptError.stackTrace}
-          handler={() => setIsModalOpen(false)}
-        />
+        <Suspense fallback={<GluuSuspenseLoader />}>
+          <GluuScriptErrorModal
+            isOpen={isModalOpen}
+            error={item.scriptError.stackTrace}
+            handler={() => setIsModalOpen(false)}
+          />
+        </Suspense>
       )}
 
       {item?.scriptError?.stackTrace ? (
@@ -535,11 +539,13 @@ function CustomScriptForm({ item, scripts, handleSubmit, viewOnly }) {
         <FormGroup row>
           <GluuLabel label="fields.level" doc_category={SCRIPT} doc_entry="level"/>
           <Col sm={9}>
-            <Counter
-              counter={item.level}
-              disabled={viewOnly}
-              onCounterChange={(level) => onLevelChange(level)}
-            />
+            <Suspense fallback={<GluuSuspenseLoader />}>
+              <Counter
+                counter={item.level}
+                disabled={viewOnly}
+                onCounterChange={(level) => onLevelChange(level)}
+              />
+            </Suspense>
             <Input type="hidden" id="level" defaultValue={item.level} />
           </Col>
         </FormGroup>
@@ -553,18 +559,20 @@ function CustomScriptForm({ item, scripts, handleSubmit, viewOnly }) {
           disabled={viewOnly}
         ></GluuProperties>
         {!scriptPath && (
-          <GluuInputEditor
-            doc_category={SCRIPT}
-            name="script"
-            language={selectedLanguage?.toLowerCase()}
-            label="script"
-            lsize={2}
-            rsize={10}
-            formik={formik}
-            value={item.script}
-            readOnly={viewOnly}
-            required
-          ></GluuInputEditor>
+          <Suspense fallback={<GluuSuspenseLoader />}>
+            <GluuInputEditor
+              doc_category={SCRIPT}
+              name="script"
+              language={selectedLanguage?.toLowerCase()}
+              label="script"
+              lsize={2}
+              rsize={10}
+              formik={formik}
+              value={item.script}
+              readOnly={viewOnly}
+              required
+            />
+          </Suspense>
         )}
 
         <FormGroup row>

admin-ui/plugins/admin/components/MAU/MauGraph.js

@@ -1,6 +1,5 @@
-import React, { useState, useEffect, useContext } from 'react'
+import React, { useState, useEffect, useContext, lazy, Suspense } from 'react'
 import moment from 'moment'
-import ActiveUsersGraph from 'Routes/Dashboards/Grapths/ActiveUsersGraph'
 import Grid from '@mui/material/Grid'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
@@ -31,6 +30,8 @@ import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 import { ThemeContext } from 'Context/theme/themeContext'
 import dayjs from 'dayjs'
 
+const ActiveUsersGraph = lazy(() => import('Routes/Dashboards/Grapths/ActiveUsersGraph'))
+
 function MauGraph() {
   const dispatch = useDispatch()
   const statData = useSelector(state => state.mauReducer.stat);
@@ -158,7 +159,7 @@ function MauGraph() {
             <FormGroup row />
             <FormGroup row>
               <Col sm={12}>
-                <ActiveUsersGraph data={doDataAugmentation(statData)} />
+                <Suspense fallback={<div>Loading...</div>}><ActiveUsersGraph data={doDataAugmentation(statData)} /></Suspense>
               </Col>
             </FormGroup>
           </CardBody>

admin-ui/plugins/auth-server/plugin-metadata.js

@@ -49,13 +49,18 @@ import {
   AGAMA_READ,
   SSA_PORTAL
 } from 'Utils/PermChecker'
-import AgamaListPage from './components/Agama/AgamaListPage'
 import { reducer as agamaReducer } from './redux/features/agamaSlice'
 import AuthNListPage from './components/AuthN/AuthNListPage'
 import { reducer as authNReducer } from './redux/features/authNSlice'
 import AuthNEditPage from './components/AuthN/AuthNEditPage'
 import SsaListPage from './components/Ssa/SsaListPage' 
 import SsaAddPage from './components/Ssa/SsaAddPage'
+import React, { Suspense, lazy } from 'react'
+
+const AgamaListPage = lazy(() => import('./components/Agama/AgamaListPage'))
+function AgamaListPageWrapper() {
+  return <Suspense fallback={<div>Loading...</div>}><AgamaListPage /></Suspense>
+} 
 
 const PLUGIN_BASE_APTH = '/auth-server'
 
@@ -185,7 +190,7 @@ const pluginMetadata = {
       permission: ACR_READ,
     },
     {
-      component: AgamaListPage,
+      component: AgamaListPageWrapper,
       path: PLUGIN_BASE_APTH + '/agama',
       permission: AGAMA_READ,
     },