M: Lazy load dialogs

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 />

rsconcept/frontend/src/app/GlobalDialogs.tsx

@@ -1,31 +1,34 @@
 'use client';
 
-import DlgChangeInputSchema from '@/dialogs/DlgChangeInputSchema';
+import React from 'react';
-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 { 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);
 

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;

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;