optimize some modals

apps/app/src/client/components/PageEditor/ConflictDiffModal/dynamic.tsx

@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/client/util/use-lazy-loader';
+import { useConflictDiffModalStatus } from '~/states/ui/modal/conflict-diff';
+
+type ConflictDiffModalProps = Record<string, unknown>;
+
+export const ConflictDiffModalLazyLoaded = (): JSX.Element => {
+  const status = useConflictDiffModalStatus();
+
+  const ConflictDiffModal = useLazyLoader<ConflictDiffModalProps>(
+    'conflict-diff-modal',
+    () => import('./ConflictDiffModal').then(mod => ({ default: mod.ConflictDiffModal })),
+    status?.isOpened ?? false,
+  );
+
+  return ConflictDiffModal ? <ConflictDiffModal /> : <></>;
+};

apps/app/src/client/components/PageEditor/ConflictDiffModal/index.ts

@@ -0,0 +1 @@
+export { ConflictDiffModalLazyLoaded } from './dynamic';

apps/app/src/client/components/PageEditor/DrawioModal.tsx → apps/app/src/client/components/PageEditor/DrawioModal/DrawioModal.tsx

@@ -17,7 +17,6 @@ import { useDrawioModalForEditorStatus, useDrawioModalForEditorActions } from '~
 import { useSWRxPersonalSettings } from '~/stores/personal-settings';
 import loggerFactory from '~/utils/logger';
 
-
 import { type DrawioConfig, DrawioCommunicationHelper } from './DrawioCommunicationHelper';
 
 const logger = loggerFactory('growi:components:DrawioModal');

apps/app/src/client/components/PageEditor/DrawioModal/dynamic.tsx

@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/client/util/use-lazy-loader';
+import { useDrawioModalStatus } from '~/states/ui/modal/drawio';
+
+type DrawioModalProps = Record<string, unknown>;
+
+export const DrawioModalLazyLoaded = (): JSX.Element => {
+  const status = useDrawioModalStatus();
+
+  const DrawioModal = useLazyLoader<DrawioModalProps>(
+    'drawio-modal',
+    () => import('./DrawioModal').then(mod => ({ default: mod.DrawioModal })),
+    status?.isOpened ?? false,
+  );
+
+  return DrawioModal ? <DrawioModal /> : <></>;
+};

apps/app/src/client/components/PageEditor/DrawioModal/index.ts

@@ -0,0 +1 @@
+export { DrawioModalLazyLoaded } from './dynamic';

apps/app/src/client/components/PageEditor/HandsontableModal.tsx → apps/app/src/client/components/PageEditor/HandsontableModal/HandsontableModal.tsx

@@ -16,9 +16,8 @@ import { debounce } from 'throttle-debounce';
 import { replaceFocusedMarkdownTableWithEditor, getMarkdownTable } from '~/client/components/PageEditor/markdown-table-util-for-editor';
 import { useHandsontableModalActions, useHandsontableModalStatus } from '~/states/ui/modal/handsontable';
 
-import ExpandOrContractButton from '../ExpandOrContractButton';
-
-import { MarkdownTableDataImportForm } from './MarkdownTableDataImportForm';
+import ExpandOrContractButton from '../../ExpandOrContractButton';
+import { MarkdownTableDataImportForm } from '../MarkdownTableDataImportForm';
 
 import styles from './HandsontableModal.module.scss';
 import 'handsontable/dist/handsontable.full.min.css';

apps/app/src/client/components/PageEditor/HandsontableModal/dynamic.tsx

@@ -0,0 +1,21 @@
+import type { JSX } from 'react';
+
+import { useHandsontableModalForEditorStatus } from '@growi/editor';
+
+import { useLazyLoader } from '~/client/util/use-lazy-loader';
+import { useHandsontableModalStatus } from '~/states/ui/modal/handsontable';
+
+type HandsontableModalProps = Record<string, unknown>;
+
+export const HandsontableModalLazyLoaded = (): JSX.Element => {
+  const status = useHandsontableModalStatus();
+  const statusForEditor = useHandsontableModalForEditorStatus();
+
+  const HandsontableModal = useLazyLoader<HandsontableModalProps>(
+    'handsontable-modal',
+    () => import('./HandsontableModal').then(mod => ({ default: mod.HandsontableModal })),
+    status?.isOpened || statusForEditor?.isOpened || false,
+  );
+
+  return HandsontableModal ? <HandsontableModal /> : <></>;
+};

apps/app/src/client/components/PageEditor/HandsontableModal/index.ts

@@ -0,0 +1 @@
+export { HandsontableModalLazyLoaded } from './dynamic';

apps/app/src/client/components/PageEditor/LinkEditModal.tsx → apps/app/src/client/components/PageEditor/LinkEditModal/LinkEditModal.tsx

@@ -4,7 +4,7 @@ import React, {
 
 import path from 'path';
 
-import { Linker } from '@growi/editor';
+import { Linker } from '@growi/editor/dist/models/linker';
 import { useLinkEditModalStatus, useLinkEditModalActions } from '@growi/editor/dist/states/modal/link-edit';
 import { useTranslation } from 'next-i18next';
 import {
@@ -22,9 +22,8 @@ import { useCurrentPagePath } from '~/states/page';
 import { usePreviewOptions } from '~/stores/renderer';
 import loggerFactory from '~/utils/logger';
 
-import SearchTypeahead from '../SearchTypeahead';
-
-import Preview from './Preview';
+import SearchTypeahead from '../../SearchTypeahead';
+import Preview from '../Preview';
 
 
 import styles from './LinkEditPreview.module.scss';

apps/app/src/client/components/PageEditor/LinkEditModal/dynamic.tsx

@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+
+import { useLinkEditModalStatus } from '@growi/editor/dist/states/modal/link-edit';
+
+import { useLazyLoader } from '~/client/util/use-lazy-loader';
+
+type LinkEditModalProps = Record<string, unknown>;
+
+export const LinkEditModalLazyLoaded = (): JSX.Element => {
+  const status = useLinkEditModalStatus();
+
+  const LinkEditModal = useLazyLoader<LinkEditModalProps>(
+    'link-edit-modal',
+    () => import('./LinkEditModal').then(mod => ({ default: mod.LinkEditModal })),
+    status?.isOpened ?? false,
+  );
+
+  return LinkEditModal ? <LinkEditModal /> : <></>;
+};

apps/app/src/client/components/PageEditor/LinkEditModal/index.ts

@@ -0,0 +1 @@
+export { LinkEditModalLazyLoaded } from './dynamic';

apps/app/src/client/components/PageEditor/conflict.tsx

@@ -5,9 +5,6 @@ import { GlobalCodeMirrorEditorKey } from '@growi/editor';
 import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client/stores/codemirror-editor';
 import { useTranslation } from 'react-i18next';
 
-import type { Save, SaveOptions } from '~/client/components/PageEditor/PageEditor';
-import { useUpdateStateAfterSave } from '~/client/services/page-operation';
-import { toastSuccess } from '~/client/util/toastr';
 import { SocketEventName } from '~/interfaces/websocket';
 import type { RemoteRevisionData } from '~/states/page';
 import { useCurrentPageData, useCurrentPageId, useSetRemoteLatestPageData } from '~/states/page';
@@ -16,6 +13,11 @@ import { EditorMode, useEditorMode } from '~/states/ui/editor';
 import { useConflictDiffModalActions } from '~/states/ui/modal/conflict-diff';
 import { usePageStatusAlertActions } from '~/states/ui/modal/page-status-alert';
 
+import { useUpdateStateAfterSave } from '../../services/page-operation';
+import { toastSuccess } from '../../util/toastr';
+
+import type { Save, SaveOptions } from './PageEditor';
+
 
 export type ConflictHandler = (
   remoteRevisionData: RemoteRevisionData,

apps/app/src/client/components/PageTags/TagEditModal/dynamic.tsx

@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/client/util/use-lazy-loader';
+import { useTagEditModalStatus } from '~/states/ui/modal/tag-edit';
+
+type TagEditModalProps = Record<string, unknown>;
+
+export const TagEditModalLazyLoaded = (): JSX.Element => {
+  const status = useTagEditModalStatus();
+
+  const TagEditModal = useLazyLoader<TagEditModalProps>(
+    'tag-edit-modal',
+    () => import('./TagEditModal').then(mod => ({ default: mod.TagEditModal })),
+    status?.isOpen ?? false,
+  );
+
+  return TagEditModal ? <TagEditModal /> : <></>;
+};

apps/app/src/client/components/PageTags/TagEditModal/index.ts

@@ -0,0 +1 @@
+export { TagEditModalLazyLoaded } from './dynamic';

apps/app/src/client/components/PageTags/index.ts

@@ -1,2 +1 @@
 export * from './PageTags';
-export * from './TagsInput';

apps/app/src/client/components/TemplateModal/dynamic.tsx

@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+
+import { useTemplateModalStatus } from '@growi/editor';
+
+import { useLazyLoader } from '~/client/util/use-lazy-loader';
+
+type TemplateModalProps = Record<string, unknown>;
+
+export const TemplateModalLazyLoaded = (): JSX.Element => {
+  const status = useTemplateModalStatus();
+
+  const TemplateModal = useLazyLoader<TemplateModalProps>(
+    'template-modal',
+    () => import('./TemplateModal').then(mod => ({ default: mod.TemplateModal })),
+    status?.isOpened ?? false,
+  );
+
+  return TemplateModal ? <TemplateModal /> : <></>;
+};

apps/app/src/client/components/TemplateModal/index.ts

@@ -0,0 +1 @@
+export { TemplateModalLazyLoaded } from './dynamic';

apps/app/src/client/components/TemplateModal/index.tsx

@@ -1 +1 @@
-export * from './TemplateModal';
+export * from './dynamic';

apps/app/src/pages/[[...path]]/index.page.tsx

@@ -11,7 +11,19 @@ import dynamic from 'next/dynamic';
 import Head from 'next/head';
 
 // eslint-disable-next-line no-restricted-imports
-import { DescendantsPageListModal } from '~/client/components/DescendantsPageListModal/DescendantsPageListModal';
+import { DescendantsPageListModalLazyLoaded } from '~/client/components/DescendantsPageListModal';
+// eslint-disable-next-line no-restricted-imports
+import { ConflictDiffModalLazyLoaded } from '~/client/components/PageEditor/ConflictDiffModal';
+// eslint-disable-next-line no-restricted-imports
+import { DrawioModalLazyLoaded } from '~/client/components/PageEditor/DrawioModal';
+// eslint-disable-next-line no-restricted-imports
+import { HandsontableModalLazyLoaded } from '~/client/components/PageEditor/HandsontableModal';
+// eslint-disable-next-line no-restricted-imports
+import { LinkEditModalLazyLoaded } from '~/client/components/PageEditor/LinkEditModal';
+// eslint-disable-next-line no-restricted-imports
+import { TagEditModalLazyLoaded } from '~/client/components/PageTags/TagEditModal';
+// eslint-disable-next-line no-restricted-imports
+import { TemplateModalLazyLoaded } from '~/client/components/TemplateModal';
 import { BasicLayout } from '~/components/Layout/BasicLayout';
 import { PageView } from '~/components/PageView/PageView';
 import { DrawioViewerScript } from '~/components/Script/DrawioViewerScript';
@@ -59,12 +71,6 @@ const DisplaySwitcher = dynamic(() => import('~/client/components/Page/DisplaySw
 const PageStatusAlert = dynamic(() => import('~/client/components/PageStatusAlert').then(mod => mod.PageStatusAlert), { ssr: false });
 
 const UnsavedAlertDialog = dynamic(() => import('~/client/components/UnsavedAlertDialog'), { ssr: false });
-const DrawioModal = dynamic(() => import('~/client/components/PageEditor/DrawioModal').then(mod => mod.DrawioModal), { ssr: false });
-const HandsontableModal = dynamic(() => import('~/client/components/PageEditor/HandsontableModal').then(mod => mod.HandsontableModal), { ssr: false });
-const TemplateModal = dynamic(() => import('~/client/components/TemplateModal').then(mod => mod.TemplateModal), { ssr: false });
-const LinkEditModal = dynamic(() => import('~/client/components/PageEditor/LinkEditModal').then(mod => mod.LinkEditModal), { ssr: false });
-const TagEditModal = dynamic(() => import('~/client/components/PageTags/TagEditModal').then(mod => mod.TagEditModal), { ssr: false });
-const ConflictDiffModal = dynamic(() => import('~/client/components/PageEditor/ConflictDiffModal').then(mod => mod.ConflictDiffModal), { ssr: false });
 
 const EditablePageEffects = dynamic(() => import('~/client/components/Page/EditablePageEffects').then(mod => mod.EditablePageEffects), { ssr: false });
 
@@ -179,13 +185,13 @@ Page.getLayout = function getLayout(page: React.ReactElement<Props>) {
         {page}
       </Layout>
       <UnsavedAlertDialog />
-      <DescendantsPageListModal />
-      <DrawioModal />
-      <HandsontableModal />
-      <TemplateModal />
-      <LinkEditModal />
-      <TagEditModal />
-      <ConflictDiffModal />
+      <DescendantsPageListModalLazyLoaded />
+      <DrawioModalLazyLoaded />
+      <HandsontableModalLazyLoaded />
+      <TemplateModalLazyLoaded />
+      <LinkEditModalLazyLoaded />
+      <TagEditModalLazyLoaded />
+      <ConflictDiffModalLazyLoaded />
     </>
   );
 };