add lazy load

src/auth/utils.js

@@ -10,7 +10,7 @@ export const hostname = 'localhost';
 const hostPort = '8090';
 export const hostPath = `http://${hostname}:${hostPort}`;
 export const apiPath = `${hostPath}/api`;
-// export const apiPath = `/api`;
+//export const apiPath = `/api`;
 
 export const isUserLoggedIn = () => {
   return localStorage.getItem('userData') && localStorage.getItem(useJwt.jwtConfig.storageTokenKeyName);

src/pages/OrganizationDetailPage/index.js

@@ -4,10 +4,16 @@ import {useEffect, useState} from "react";
 import * as React from "react";
 import * as HttpUtils from "../../utils/HttpUtils";
 import {useParams} from "react-router-dom";
-import InfoCard from "./OrganizationCard";
-import LoadingComponent from "../extra-pages/LoadingComponent";
 import * as UrlUtils from "../../utils/ApiPathConst";
 
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const InfoCard = Loadable(lazy(() => import('./OrganizationCard')));
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+// import InfoCard from "./OrganizationCard";
+// import LoadingComponent from "../extra-pages/LoadingComponent";
+
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 

src/pages/OrganizationDetailPage_FromUser/index.js

@@ -4,11 +4,16 @@ import {useEffect, useState} from "react";
 import * as React from "react";
 import * as HttpUtils from "../../utils/HttpUtils";
 import {useParams} from "react-router-dom";
-import InfoCard from "./OrganizationCard_loadFromUser";
-import LoadingComponent from "../extra-pages/LoadingComponent";
 import {useNavigate} from "react-router-dom";
 import * as UrlUtils from "../../utils/ApiPathConst";
 
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const InfoCard = Loadable(lazy(() => import('./OrganizationCard_loadFromUser')));
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+// import InfoCard from "./OrganizationCard_loadFromUser";
+// import LoadingComponent from "../extra-pages/LoadingComponent";
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 

src/pages/OrganizationSearchPage/index.js

@@ -3,14 +3,21 @@ import {
     Grid, Typography
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
-import SearchForm from "./OrganizationSearchForm";
-import EventTable from "./OrganizationTable";
+
 import {useEffect, useState} from "react";
 import * as UrlUtils from "../../utils/ApiPathConst";
 import * as React from "react";
-import LoadingComponent from "../extra-pages/LoadingComponent";
 import * as HttpUtils from "../../utils/HttpUtils";
 
+// import LoadingComponent from "../extra-pages/LoadingComponent";
+// import SearchForm from "./OrganizationSearchForm";
+// import EventTable from "./OrganizationTable";
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const SearchForm = Loadable(lazy(() => import('./OrganizationSearchForm')));
+const EventTable = Loadable(lazy(() => import('./OrganizationTable')));
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const OrganizationSearchPage = () => {

src/pages/authentication/AuthWrapper.js

@@ -4,9 +4,10 @@ import PropTypes from 'prop-types';
 import { Box, Grid,Typography } from '@mui/material';
 
 // project import
-import AuthCard from './AuthCard';
-// import Logo from 'components/Logo';
-// import AuthFooter from 'components/cards/AuthFooter';
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const AuthCard = Loadable(lazy(() => import('./AuthCardCustom')));
+//import AuthCard from './AuthCard';
 
 // assets
 // import AuthBackground from 'assets/images/auth/AuthBackground';

src/pages/authentication/AuthWrapperCustom.js

@@ -4,12 +4,14 @@ import PropTypes from 'prop-types';
 import { Box, Grid } from '@mui/material';
 
 // project import
-import AuthCard from './AuthCardCustom';
-// import Logo from 'components/Logo';
-// import AuthFooter from 'components/cards/AuthFooter';
+const AuthCard = Loadable(lazy(() => import('./AuthCardCustom')));
+//import AuthCard from './AuthCardCustom';
 
 // assets
-import AuthBackground from 'assets/images/auth/AuthBackground';
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const AuthBackground = Loadable(lazy(() => import('assets/images/auth/AuthBackground')));
+//import AuthBackground from 'assets/images/auth/AuthBackground';
 
 // ==============================|| AUTHENTICATION - WRAPPER ||============================== //
 

src/pages/authentication/BusRegister.js

@@ -15,8 +15,12 @@
   import VisibilityIcon from '@mui/icons-material/Visibility';
 
   // project import
-  import CustomFormWizard from './auth-forms/BusCustomFormWizard';
-  import AuthWrapper from './AuthWrapperCustom';
+  import Loadable from 'components/Loadable';
+  import { lazy } from 'react';
+  const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/BusCustomFormWizard')));
+  const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
+  // import CustomFormWizard from './auth-forms/BusCustomFormWizard';
+  // import AuthWrapper from './AuthWrapperCustom';
 
   // ================================|| REGISTER ||================================ //
   const stepStyle = {

src/pages/authentication/Login.js

@@ -4,8 +4,12 @@
 import { Grid, Stack, Typography } from '@mui/material';
 
 // project import
-import AuthLogin from './auth-forms/AuthLoginCustom';
-import AuthWrapper from './AuthWrapper';
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const AuthLogin = Loadable(lazy(() => import('./auth-forms/AuthLoginCustom')));
+const AuthWrapper = Loadable(lazy(() => import('./AuthWrapper')));
+// import AuthLogin from './auth-forms/AuthLoginCustom';
+// import AuthWrapper from './AuthWrapper';
 // ================================|| LOGIN ||================================ //
 
 const Login = () => (

src/pages/authentication/Register.js

@@ -3,9 +3,6 @@
     // ,useEffect
   } from 'react';
 
-  import Loadable from 'components/Loadable';
-  import { lazy } from 'react';
-
   // material-ui
   import { 
     Stepper,
@@ -20,8 +17,12 @@
   import VisibilityIcon from '@mui/icons-material/Visibility';
 
   // project import
+  import Loadable from 'components/Loadable';
+  import { lazy } from 'react';
   const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/CustomFormWizard')));
-  const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
+const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
+  // const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/CustomFormWizard')));
+  // const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
 
   //import CustomFormWizard from './auth-forms/CustomFormWizard';
   //import AuthWrapper from './AuthWrapperCustom';

src/pages/authentication/auth-forms/BusCustomFormWizard.js

@@ -26,17 +26,22 @@ import * as yup from 'yup';
 
 // project import
 // import AnimateButton from 'components/@extended/AnimateButton';
+
 import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
 import {apiPath} from "auth/utils";
 import axios from "axios";
 import {POST_PUBLIC_USER_REGISTER} from "utils/ApiPathConst";
 import * as HttpUtils from 'utils/HttpUtils';
-import UploadFileTable from './UploadFileTable';
-import LoadingComponent from "../../extra-pages/LoadingComponent";
+
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const UploadFileTable = Loadable(lazy(() => import('./UploadFileTable')));
+const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
+// import UploadFileTable from './UploadFileTable';
+// import LoadingComponent from "../../extra-pages/LoadingComponent";
 
 // assets
 import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
-// import { Paper } from '../../../../node_modules/@mui/material/index';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
 

src/pages/authentication/auth-forms/CustomFormWizard.js

@@ -31,8 +31,14 @@ import {apiPath} from "auth/utils";
 import axios from "axios";
 import {POST_PUBLIC_USER_REGISTER} from "utils/ApiPathConst";
 import * as HttpUtils from 'utils/HttpUtils';
-import UploadFileTable from './UploadFileTable';
-import LoadingComponent from "../../extra-pages/LoadingComponent";
+import * as ComboData from "../../../utils/ComboData";
+
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const UploadFileTable = Loadable(lazy(() => import('./UploadFileTable')));
+const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
+// import UploadFileTable from './UploadFileTable';
+// import LoadingComponent from "../../extra-pages/LoadingComponent";
 
 // assets
 import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
@@ -41,7 +47,7 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
 import { Link } from 'react-router-dom';
 
-import * as ComboData from "../../../utils/ComboData";
+
 // ============================|| FIREBASE - REGISTER ||============================ //
 
 const CustomFormWizard = (props) => {

src/pages/dashboard/index.js

@@ -19,13 +19,23 @@ import {
 } from '@mui/material';
 
 // project import
-import OrdersTable from './OrdersTable';
-import IncomeAreaChart from './IncomeAreaChart';
-import MonthlyBarChart from './MonthlyBarChart';
-import ReportAreaChart from './ReportAreaChart';
-import SalesColumnChart from './SalesColumnChart';
-import MainCard from 'components/MainCard';
-import AnalyticEcommerce from 'components/cards/statistics/AnalyticEcommerce';
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const OrdersTable = Loadable(lazy(() => import('./OrdersTable')));
+const IncomeAreaChart = Loadable(lazy(() => import('./IncomeAreaChart')));
+const MonthlyBarChart = Loadable(lazy(() => import('./MonthlyBarChart')));
+const ReportAreaChart = Loadable(lazy(() => import('./ReportAreaChart')));
+const SalesColumnChart = Loadable(lazy(() => import('./SalesColumnChart')));
+const MainCard = Loadable(lazy(() => import('components/MainCard')));
+const AnalyticEcommerce = Loadable(lazy(() => import('components/cards/statistics/AnalyticEcommerce')));
+
+// import OrdersTable from './OrdersTable';
+// import IncomeAreaChart from './IncomeAreaChart';
+// import MonthlyBarChart from './MonthlyBarChart';
+// import ReportAreaChart from './ReportAreaChart';
+// import SalesColumnChart from './SalesColumnChart';
+// import MainCard from 'components/MainCard';
+// import AnalyticEcommerce from 'components/cards/statistics/AnalyticEcommerce';
 
 // assets
 import { GiftOutlined, MessageOutlined, SettingOutlined } from '@ant-design/icons';

src/pages/pnspsUserDetailPage/UserAuthTable.js

@@ -5,10 +5,14 @@ import {
 import {useEffect, useState} from "react";
 import axios from "axios";
 import {apiPath} from "../../auth/utils";
-import LoadingComponent from "../extra-pages/LoadingComponent";
+//import LoadingComponent from "../extra-pages/LoadingComponent";
 import * as React from "react";
 import {GET_AUTH_LIST} from "../../utils/ApiPathConst";
 
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UserAuthTable({setSelectedRow, userAuth}) {

src/pages/pnspsUserDetailPage/UserAuthorityCard.js

@@ -5,8 +5,13 @@ import {
 import MainCard from "../../components/MainCard";
 import * as React from "react";
 import {useEffect, useState} from "react";
-import LoadingComponent from "../extra-pages/LoadingComponent";
-import UserAuthTable from "./UserAuthTable";
+
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const UserAuthTable = Loadable(lazy(() => import('./UserAuthTable')));
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+// import LoadingComponent from "../extra-pages/LoadingComponent";
+// import UserAuthTable from "./UserAuthTable";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 

src/pages/pnspsUserDetailPage/UserGroupCard.js

@@ -5,9 +5,13 @@ import {
 import MainCard from "../../components/MainCard";
 import * as React from "react";
 import {useEffect, useState} from "react";
-import LoadingComponent from "../extra-pages/LoadingComponent";
+//import LoadingComponent from "../extra-pages/LoadingComponent";
 import UserGroupTable from "./UserGroupTable";
 
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 

src/pages/pnspsUserDetailPage/UserGroupTable.js

@@ -5,10 +5,14 @@ import {
 import {useEffect, useState} from "react";
 import axios from "axios";
 import {apiPath} from "../../auth/utils";
-import LoadingComponent from "../extra-pages/LoadingComponent";
+//import LoadingComponent from "../extra-pages/LoadingComponent";
 import * as React from "react";
 import {GET_GROUP_COMBO_PATH} from "../../utils/ApiPathConst";
 
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UserGroupTable({setSelectedRow, userGroup}) {

src/pages/pnspsUserDetailPage/UserInformationCard.js

@@ -16,7 +16,10 @@ import {useForm} from "react-hook-form";
 // } from "../pnspsUserSearchPage/DummyComboRecord";
 import {useEffect, useState} from "react";
 import Checkbox from "@mui/material/Checkbox";
-import LoadingComponent from "../extra-pages/LoadingComponent";
+//import LoadingComponent from "../extra-pages/LoadingComponent";
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
 //import {useParams} from "react-router-dom";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //

src/pages/pnspsUserDetailPage/index.js

@@ -8,12 +8,19 @@ import * as React from "react";
 import axios from "axios";
 import {apiPath} from "../../auth/utils";
 import {useParams} from "react-router-dom";
-import UserInformationCard from "./UserInformationCard";
-import LoadingComponent from "../extra-pages/LoadingComponent";
-import UserGroupCard from "./UserGroupCard";
-import UserAuthorityCard from "./UserAuthorityCard";
 import {GET_USER_PATH} from "../../utils/ApiPathConst";
 
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard')));
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const UserGroupCard = Loadable(lazy(() => import('./UserGroupCard')));
+const UserAuthorityCard = Loadable(lazy(() => import('./UserAuthorityCard')));
+// import UserInformationCard from "./UserInformationCard";
+// import LoadingComponent from "../extra-pages/LoadingComponent";
+// import UserGroupCard from "./UserGroupCard";
+// import UserAuthorityCard from "./UserAuthorityCard";
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 

src/pages/pnspsUserDetailPage_Individual/index.js

@@ -5,10 +5,17 @@ import * as React from "react";
 //import axios from "axios";
 import * as HttpUtils from "../../utils/HttpUtils";
 import {useParams} from "react-router-dom";
-import UserInformationCard from "./UserInformationCard_Individual";
-import LoadingComponent from "../extra-pages/LoadingComponent";
 import * as UrlUtils from "../../utils/ApiPathConst";
 
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard_Individual')));
+
+// import UserInformationCard from "./UserInformationCard_Individual";
+// import LoadingComponent from "../extra-pages/LoadingComponent";
+
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 

src/pages/pnspsUserDetailPage_Organization/index.js

@@ -7,10 +7,16 @@ import * as HttpUtils from "../../utils/HttpUtils";
 import {useParams} from "react-router-dom";
 import FileList from "../../components/FileList"
 import MainCard from "../../components/MainCard";
-import UserInformationCard from "./UserInformationCard_Organization";
-import LoadingComponent from "../extra-pages/LoadingComponent";
 import * as UrlUtils from "../../utils/ApiPathConst";
 
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard_Organization')));
+//import UserInformationCard from "./UserInformationCard_Organization";
+//import LoadingComponent from "../extra-pages/LoadingComponent";
+
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 

src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js

@@ -5,8 +5,12 @@ import {
 import MainCard from "../../components/MainCard";
 import * as React from "react";
 import {useEffect, useState} from "react";
-import LoadingComponent from "../extra-pages/LoadingComponent";
-import GroupAuthTable from "./GroupAuthTable";
+//import LoadingComponent from "../extra-pages/LoadingComponent";
+//import GroupAuthTable from "./GroupAuthTable";
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const GroupAuthTable = Loadable(lazy(() => import('./GroupAuthTable')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 

src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js

@@ -5,10 +5,14 @@ import {
 import {useEffect, useState} from "react";
 import axios from "axios";
 import {apiPath} from "../../auth/utils";
-import LoadingComponent from "../extra-pages/LoadingComponent";
+//import LoadingComponent from "../extra-pages/LoadingComponent";
 import * as React from "react";
 import {GET_GROUP_AUTH_LIST} from "../../utils/ApiPathConst";
 
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function GroupAuthTable({setSelectedRow, userAuth}) {

src/pages/pnspsUserGroupDetailPage/UserAddCard.js

@@ -7,13 +7,19 @@ import {
 import MainCard from "../../components/MainCard";
 import * as React from "react";
 import {useEffect, useState} from "react";
-import LoadingComponent from "../extra-pages/LoadingComponent";
-import UserAddTable from "./UserAddTable";
 import {GET_GROUP_MEMBER_LIST_PATH, GET_USER_COMBO_LIST} from "../../utils/ApiPathConst";
 import axios from "axios";
 import {apiPath} from "../../auth/utils";
 import Autocomplete from "@mui/material/Autocomplete";
 import {getIdList} from "../../utils/CommonFunction";
+
+//import LoadingComponent from "../extra-pages/LoadingComponent";
+//import UserAddTable from "./UserAddTable";
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const UserAddTable = Loadable(lazy(() => import('./UserAddTable')));
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 

src/pages/pnspsUserGroupDetailPage/UserAddTable.js

@@ -3,11 +3,15 @@ import {
     DataGrid, GridActionsCellItem,
 } from "@mui/x-data-grid";
 import {useEffect, useState} from "react";
-import LoadingComponent from "../extra-pages/LoadingComponent";
+//import LoadingComponent from "../extra-pages/LoadingComponent";
 import * as React from "react";
 import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 import {removeObjectWithId} from "../../utils/CommonFunction";
 
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UserAddTable({setGroupUserData, userList}) {

src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js

@@ -6,8 +6,11 @@ import MainCard from "../../components/MainCard";
 import * as React from "react";
 import {useForm} from "react-hook-form";
 import {useEffect, useState} from "react";
-import LoadingComponent from "../extra-pages/LoadingComponent";
+//import LoadingComponent from "../extra-pages/LoadingComponent";
 //import {useParams} from "react-router-dom";
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 

src/pages/pnspsUserGroupDetailPage/index.js

@@ -8,12 +8,20 @@ import * as React from "react";
 import axios from "axios";
 import {apiPath} from "../../auth/utils";
 import {useParams} from "react-router-dom";
-import LoadingComponent from "../extra-pages/LoadingComponent";
-import {GET_GROUP_LIST_PATH} from "../../utils/ApiPathConst";
-import GroupAuthCard from "./GroupAuthCard";
-import UserGroupInfoCard from "./UserGroupInfoCard";
-import UserAddCard from "./UserAddCard";
 import {getIdList} from "../../utils/CommonFunction";
+import {GET_GROUP_LIST_PATH} from "../../utils/ApiPathConst";
+
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const GroupAuthCard = Loadable(lazy(() => import('./GroupAuthCard')));
+const UserGroupInfoCard = Loadable(lazy(() => import('./UserGroupInfoCard')));
+const UserAddCard = Loadable(lazy(() => import('./UserAddCard')));
+//import LoadingComponent from "../extra-pages/LoadingComponent";
+//import GroupAuthCard from "./GroupAuthCard";
+//import UserGroupInfoCard from "./UserGroupInfoCard";
+//import UserAddCard from "./UserAddCard";
+
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 

src/pages/pnspsUserGroupSearchPage/index.js

@@ -5,15 +5,22 @@ import {
     Grid, Typography
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
-import UserGroupSearchForm from "./UserGroupSearchForm";
-import UserGroupTable from "./UserGroupTable";
+
 import {useEffect, useState} from "react";
 import axios from "axios";
 import {apiPath} from "../../auth/utils";
 import {GET_GROUP_LIST_PATH} from "../../utils/ApiPathConst";
-import LoadingComponent from "../extra-pages/LoadingComponent";
 import * as React from "react";
 
+//import LoadingComponent from "../extra-pages/LoadingComponent";
+// import UserGroupSearchForm from "./UserGroupSearchForm";
+// import UserGroupTable from "./UserGroupTable";
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const UserGroupSearchForm = Loadable(lazy(() => import('./UserGroupSearchForm')));
+const UserGroupTable = Loadable(lazy(() => import('./UserGroupTable')));
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserGroupSearchPanel = () => {

src/pages/pnspsUserSearchPage/index.js

@@ -3,14 +3,20 @@ import {
     Grid, Typography
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
-import SearchForm from "./UserSearchForm";
-import EventTable from "./UserTable";
 import {useEffect, useState} from "react";
 import axios from "axios";
 import {apiPath} from "../../auth/utils";
 import {GET_USER_PATH} from "../../utils/ApiPathConst";
 import * as React from "react";
-import LoadingComponent from "../extra-pages/LoadingComponent";
+
+// import LoadingComponent from "../extra-pages/LoadingComponent";
+// import SearchForm from "./UserSearchForm";
+// import EventTable from "./UserTable";
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const SearchForm = Loadable(lazy(() => import('./UserSearchForm')));
+const EventTable = Loadable(lazy(() => import('./UserTable')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 

src/pages/pnspsUserSearchPage_Individual/index.js

@@ -3,16 +3,22 @@ import {
     Grid, Typography
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
-import SearchForm from "./UserSearchForm_Individual";
-import EventTable from "./UserTable_Individual";
 import {useEffect, useState} from "react";
 //import axios from "axios";
 //import {apiPath} from "../../auth/utils";
 import {GET_IND_USER_PATH} from "../../utils/ApiPathConst";
 import * as React from "react";
-import LoadingComponent from "../extra-pages/LoadingComponent";
 import * as HttpUtils from "../../utils/HttpUtils";
 
+//import LoadingComponent from "../extra-pages/LoadingComponent";
+//import SearchForm from "./UserSearchForm_Individual";
+//import EventTable from "./UserTable_Individual";
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const SearchForm = Loadable(lazy(() => import('./UserSearchForm_Individual')));
+const EventTable = Loadable(lazy(() => import('./UserTable_Individual')));
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSearchPage_Individual = () => {

src/pages/pnspsUserSearchPage_Organization/index.js

@@ -3,16 +3,23 @@ import {
     Grid, Typography
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
-import SearchForm from "./UserSearchForm_Organization";
-import EventTable from "./UserTable_Organization";
 import {useEffect, useState} from "react";
 //import axios from "axios";
 //import {apiPath} from "../../auth/utils";
 import * as UrlUtils from "../../utils/ApiPathConst";
 import * as React from "react";
-import LoadingComponent from "../extra-pages/LoadingComponent";
 import * as HttpUtils from "../../utils/HttpUtils";
 
+//import LoadingComponent from "../extra-pages/LoadingComponent";
+//import SearchForm from "./UserSearchForm_Organization";
+//import EventTable from "./UserTable_Organization";
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const SearchForm = Loadable(lazy(() => import('./UserSearchForm_Organization')));
+const EventTable = Loadable(lazy(() => import('./UserTable_Organization')));
+
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSearchPage_Organization = () => {

src/routes/index.js

@@ -8,6 +8,9 @@ import {
     setupAxiosInterceptors,
     } from "../auth";
 import SettingRoutes from './SettingRoutes';
+// import Loadable from 'components/Loadable';
+// import { lazy } from 'react';
+// const SettingRoutes = Loadable(lazy(() => import('./SettingRoutes')));
 // ==============================|| ROUTING RENDER ||============================== //
 
 export default function ThemeRoutes() {
@@ -16,7 +19,7 @@ export default function ThemeRoutes() {
         //auto logout if token not valid
         setupAxiosInterceptors();
     }
-
+console.log();
     return useRoutes([{
         path: '',
         children: [