From c666f2b41a103a2caace76a46c714643e6dedb4b Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Thu, 30 Jan 2025 00:40:06 +0300
Subject: [PATCH] M: Lazy load dialogs

---
 .../frontend/src/app/ApplicationLayout.tsx    |  5 +-
 rsconcept/frontend/src/app/GlobalDialogs.tsx  | 49 ++++++++++---------
 .../src/components/ui/ModalLoader.tsx         | 25 ++++++++++
 .../OssPage => dialogs}/DlgChangeLocation.tsx |  0
 rsconcept/frontend/src/stores/dialogs.ts      |  2 +-
 5 files changed, 56 insertions(+), 25 deletions(-)
 create mode 100644 rsconcept/frontend/src/components/ui/ModalLoader.tsx
 rename rsconcept/frontend/src/{pages/OssPage => dialogs}/DlgChangeLocation.tsx (100%)

diff --git a/rsconcept/frontend/src/app/ApplicationLayout.tsx b/rsconcept/frontend/src/app/ApplicationLayout.tsx
index 1973d9b6..0229394f 100644
--- a/rsconcept/frontend/src/app/ApplicationLayout.tsx
+++ b/rsconcept/frontend/src/app/ApplicationLayout.tsx
@@ -6,6 +6,7 @@ import ConceptToaster from '@/app/ConceptToaster';
 import Footer from '@/app/Footer';
 import Navigation from '@/app/Navigation';
 import Loader from '@/components/ui/Loader';
+import ModalLoader from '@/components/ui/ModalLoader';
 import { useAppLayoutStore, useMainHeight, useViewportHeight } from '@/stores/appLayout';
 import { globals } from '@/utils/constants';
 
@@ -45,7 +46,9 @@ function ApplicationLayout() {
             pauseOnFocusLoss={false}
           />
 
-          <GlobalDialogs />
+          <Suspense fallback={<ModalLoader />}>
+            <GlobalDialogs />
+          </Suspense>
           <GlobalTooltips />
 
           <Navigation />
diff --git a/rsconcept/frontend/src/app/GlobalDialogs.tsx b/rsconcept/frontend/src/app/GlobalDialogs.tsx
index a8a9c5dd..2ff1fcde 100644
--- a/rsconcept/frontend/src/app/GlobalDialogs.tsx
+++ b/rsconcept/frontend/src/app/GlobalDialogs.tsx
@@ -1,31 +1,34 @@
 'use client';
 
-import DlgChangeInputSchema from '@/dialogs/DlgChangeInputSchema';
-import DlgCloneLibraryItem from '@/dialogs/DlgCloneLibraryItem';
-import DlgCreateCst from '@/dialogs/DlgCreateCst';
-import DlgCreateOperation from '@/dialogs/DlgCreateOperation';
-import DlgCreateVersion from '@/dialogs/DlgCreateVersion';
-import DlgCstTemplate from '@/dialogs/DlgCstTemplate';
-import DlgDeleteCst from '@/dialogs/DlgDeleteCst';
-import DlgDeleteOperation from '@/dialogs/DlgDeleteOperation';
-import DlgEditEditors from '@/dialogs/DlgEditEditors';
-import DlgEditOperation from '@/dialogs/DlgEditOperation';
-import DlgEditReference from '@/dialogs/DlgEditReference';
-import DlgEditVersions from '@/dialogs/DlgEditVersions';
-import DlgEditWordForms from '@/dialogs/DlgEditWordForms';
-import DlgGraphParams from '@/dialogs/DlgGraphParams';
-import DlgInlineSynthesis from '@/dialogs/DlgInlineSynthesis';
-import DlgRelocateConstituents from '@/dialogs/DlgRelocateConstituents';
-import DlgRenameCst from '@/dialogs/DlgRenameCst';
-import DlgShowAST from '@/dialogs/DlgShowAST';
-import DlgShowQR from '@/dialogs/DlgShowQR';
-import DlgShowTypeGraph from '@/dialogs/DlgShowTypeGraph';
-import DlgSubstituteCst from '@/dialogs/DlgSubstituteCst';
-import DlgUploadRSForm from '@/dialogs/DlgUploadRSForm';
+import React from 'react';
+
 import { DialogType } from '@/models/miscellaneous';
-import DlgChangeLocation from '@/pages/OssPage/DlgChangeLocation';
 import { useDialogsStore } from '@/stores/dialogs';
 
+const DlgChangeInputSchema = React.lazy(() => import('@/dialogs/DlgChangeInputSchema'));
+const DlgChangeLocation = React.lazy(() => import('@/dialogs/DlgChangeLocation'));
+const DlgCloneLibraryItem = React.lazy(() => import('@/dialogs/DlgCloneLibraryItem'));
+const DlgCreateCst = React.lazy(() => import('@/dialogs/DlgCreateCst'));
+const DlgCreateOperation = React.lazy(() => import('@/dialogs/DlgCreateOperation'));
+const DlgCreateVersion = React.lazy(() => import('@/dialogs/DlgCreateVersion'));
+const DlgCstTemplate = React.lazy(() => import('@/dialogs/DlgCstTemplate'));
+const DlgDeleteCst = React.lazy(() => import('@/dialogs/DlgDeleteCst'));
+const DlgDeleteOperation = React.lazy(() => import('@/dialogs/DlgDeleteOperation'));
+const DlgEditEditors = React.lazy(() => import('@/dialogs/DlgEditEditors'));
+const DlgEditOperation = React.lazy(() => import('@/dialogs/DlgEditOperation'));
+const DlgEditReference = React.lazy(() => import('@/dialogs/DlgEditReference'));
+const DlgEditVersions = React.lazy(() => import('@/dialogs/DlgEditVersions'));
+const DlgEditWordForms = React.lazy(() => import('@/dialogs/DlgEditWordForms'));
+const DlgGraphParams = React.lazy(() => import('@/dialogs/DlgGraphParams'));
+const DlgInlineSynthesis = React.lazy(() => import('@/dialogs/DlgInlineSynthesis'));
+const DlgRelocateConstituents = React.lazy(() => import('@/dialogs/DlgRelocateConstituents'));
+const DlgRenameCst = React.lazy(() => import('@/dialogs/DlgRenameCst'));
+const DlgShowAST = React.lazy(() => import('@/dialogs/DlgShowAST'));
+const DlgShowQR = React.lazy(() => import('@/dialogs/DlgShowQR'));
+const DlgShowTypeGraph = React.lazy(() => import('@/dialogs/DlgShowTypeGraph'));
+const DlgSubstituteCst = React.lazy(() => import('@/dialogs/DlgSubstituteCst'));
+const DlgUploadRSForm = React.lazy(() => import('@/dialogs/DlgUploadRSForm'));
+
 export const GlobalDialogs = () => {
   const active = useDialogsStore(state => state.active);
 
diff --git a/rsconcept/frontend/src/components/ui/ModalLoader.tsx b/rsconcept/frontend/src/components/ui/ModalLoader.tsx
new file mode 100644
index 00000000..8929420d
--- /dev/null
+++ b/rsconcept/frontend/src/components/ui/ModalLoader.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import clsx from 'clsx';
+
+import Loader from './Loader';
+
+function ModalLoader() {
+  return (
+    <div className='fixed top-0 left-0 w-full h-full z-modal cursor-default'>
+      <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'backdrop-blur-[3px] opacity-50')} />
+      <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'bg-prim-0 opacity-25')} />
+      <div
+        className={clsx(
+          'cc-animate-modal p-20',
+          'z-modal absolute bottom-1/2 left-1/2 -translate-x-1/2 translate-y-1/2',
+          'border rounded-xl bg-prim-100'
+        )}
+      >
+        <Loader circular scale={6} />
+      </div>
+    </div>
+  );
+}
+
+export default ModalLoader;
diff --git a/rsconcept/frontend/src/pages/OssPage/DlgChangeLocation.tsx b/rsconcept/frontend/src/dialogs/DlgChangeLocation.tsx
similarity index 100%
rename from rsconcept/frontend/src/pages/OssPage/DlgChangeLocation.tsx
rename to rsconcept/frontend/src/dialogs/DlgChangeLocation.tsx
diff --git a/rsconcept/frontend/src/stores/dialogs.ts b/rsconcept/frontend/src/stores/dialogs.ts
index f5966b50..c45af1db 100644
--- a/rsconcept/frontend/src/stores/dialogs.ts
+++ b/rsconcept/frontend/src/stores/dialogs.ts
@@ -1,6 +1,7 @@
 import { create } from 'zustand';
 
 import { DlgChangeInputSchemaProps } from '@/dialogs/DlgChangeInputSchema';
+import { DlgChangeLocationProps } from '@/dialogs/DlgChangeLocation';
 import { DlgCloneLibraryItemProps } from '@/dialogs/DlgCloneLibraryItem';
 import { DlgCreateCstProps } from '@/dialogs/DlgCreateCst/DlgCreateCst';
 import { DlgCreateOperationProps } from '@/dialogs/DlgCreateOperation/DlgCreateOperation';
@@ -23,7 +24,6 @@ import { DlgShowTypeGraphProps } from '@/dialogs/DlgShowTypeGraph/DlgShowTypeGra
 import { DlgSubstituteCstProps } from '@/dialogs/DlgSubstituteCst';
 import { DlgUploadRSFormProps } from '@/dialogs/DlgUploadRSForm';
 import { DialogType } from '@/models/miscellaneous';
-import { DlgChangeLocationProps } from '@/pages/OssPage/DlgChangeLocation';
 
 interface DialogsStore {
   active: DialogType | undefined;