optimize some modals

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

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

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

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

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

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

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

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

apps/app/src/client/components/PutbackPageModal.jsx → apps/app/src/client/components/PutbackPageModal/PutbackPageModal.jsx

@@ -11,7 +11,7 @@ import { apiPost } from '~/client/util/apiv1-client';
 import { usePutBackPageModalActions, usePutBackPageModalStatus } from '~/states/ui/modal/put-back-page';
 import { mutateAllPageInfo } from '~/stores/page';
 
-import ApiErrorMessageList from './PageManagement/ApiErrorMessageList';
+import ApiErrorMessageList from '../PageManagement/ApiErrorMessageList';
 
 const PutBackPageModalSubstance = ({ pageDataToRevert, closePutBackPageModal }) => {
   const { t } = useTranslation();
@@ -147,4 +147,4 @@ const PutBackPageModal = () => {
   );
 };
 
-export default PutBackPageModal;
+export { PutBackPageModal };

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

@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/client/util/use-lazy-loader';
+import { usePutBackPageModalStatus } from '~/states/ui/modal/put-back-page';
+
+type PutBackPageModalProps = Record<string, unknown>;
+
+export const PutBackPageModalLazyLoaded = (): JSX.Element => {
+  const status = usePutBackPageModalStatus();
+
+  const PutBackPageModal = useLazyLoader<PutBackPageModalProps>(
+    'put-back-page-modal',
+    () => import('./PutbackPageModal').then(mod => ({ default: mod.PutBackPageModal })),
+    status?.isOpened ?? false,
+  );
+
+  return PutBackPageModal ? <PutBackPageModal /> : <></>;
+};

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

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

apps/app/src/components/Layout/BasicLayout.tsx

@@ -1,13 +1,23 @@
 import type { JSX, ReactNode } from 'react';
 import dynamic from 'next/dynamic';
 
+// eslint-disable-next-line no-restricted-imports
+import { DeleteBookmarkFolderModalLazyLoaded } from '~/client/components/DeleteBookmarkFolderModal';
 import { GrantedGroupsInheritanceSelectModalLazyLoaded } from '~/client/components/GrantedGroupsInheritanceSelectModal';
 import { PageAccessoriesModalLazyLoaded } from '~/client/components/PageAccessoriesModal';
+// eslint-disable-next-line no-restricted-imports
+import { DeleteAttachmentModalLazyLoaded } from '~/client/components/PageAttachment';
 import { PageDeleteModalLazyLoaded } from '~/client/components/PageDeleteModal';
 import { PageDuplicateModalLazyLoaded } from '~/client/components/PageDuplicateModal';
 import { PagePresentationModalLazyLoaded } from '~/client/components/PagePresentationModal';
 import { PageRenameModalLazyLoaded } from '~/client/components/PageRenameModal';
+// eslint-disable-next-line no-restricted-imports
+import { PageSelectModalLazyLoaded } from '~/client/components/PageSelectModal';
+// eslint-disable-next-line no-restricted-imports
+import { PutBackPageModalLazyLoaded } from '~/client/components/PutbackPageModal';
 import { ShortcutsModalLazyLoaded } from '~/client/components/ShortcutsModal';
+// eslint-disable-next-line no-restricted-imports
+import { AiAssistantManagementModalLazyLoaded } from '~/features/openai/client/components/AiAssistant/AiAssistantManagementModal';
 import { PageBulkExportSelectModalLazyLoaded } from '~/features/page-bulk-export/client/components';
 
 import { RawLayout } from './RawLayout';
@@ -36,13 +46,6 @@ const AlertSiteUrlUndefined = dynamic(
     ),
   { ssr: false },
 );
-const DeleteAttachmentModal = dynamic(
-  () =>
-    import('~/client/components/PageAttachment/DeleteAttachmentModal').then(
-      (mod) => mod.DeleteAttachmentModal,
-    ),
-  { ssr: false },
-);
 const HotkeysManager = dynamic(
   () => import('~/client/components/Hotkeys/HotkeysManager'),
   { ssr: false },
@@ -58,40 +61,15 @@ const SystemVersion = dynamic(
   () => import('~/client/components/SystemVersion'),
   { ssr: false },
 );
-const PutbackPageModal = dynamic(
-  () => import('~/client/components/PutbackPageModal'),
-  { ssr: false },
-);
 // Page modals
 const PageCreateModal = dynamic(
   () => import('~/client/components/PageCreateModal'),
   { ssr: false },
 );
-const DeleteBookmarkFolderModal = dynamic(
-  () =>
-    import('~/client/components/DeleteBookmarkFolderModal').then(
-      (mod) => mod.DeleteBookmarkFolderModal,
-    ),
-  { ssr: false },
-);
 const SearchModal = dynamic(
   () => import('~/features/search/client/components/SearchModal'),
   { ssr: false },
 );
-const AiAssistantManagementModal = dynamic(
-  () =>
-    import(
-      '~/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementModal'
-    ).then((mod) => mod.AiAssistantManagementModal),
-  { ssr: false },
-);
-const PageSelectModal = dynamic(
-  () =>
-    import('~/client/components/PageSelectModal/PageSelectModal').then(
-      (mod) => mod.PageSelectModal,
-    ),
-  { ssr: false },
-);
 
 type Props = {
   children?: ReactNode;
@@ -123,11 +101,11 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
       <PageDeleteModalLazyLoaded />
       <PageRenameModalLazyLoaded />
       <PageAccessoriesModalLazyLoaded />
-      <DeleteAttachmentModal />
-      <DeleteBookmarkFolderModal />
-      <PutbackPageModal />
-      <PageSelectModal />
-      <AiAssistantManagementModal />
+      <DeleteAttachmentModalLazyLoaded />
+      <DeleteBookmarkFolderModalLazyLoaded />
+      <PutBackPageModalLazyLoaded />
+      <PageSelectModalLazyLoaded />
+      <AiAssistantManagementModalLazyLoaded />
 
       <PagePresentationModalLazyLoaded />
       <HotkeysManager />

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/dynamic.tsx

@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/client/util/use-lazy-loader';
+
+import { useAiAssistantManagementModalStatus } from '../../../states/modal/ai-assistant-management';
+
+type AiAssistantManagementModalProps = Record<string, unknown>;
+
+export const AiAssistantManagementModalLazyLoaded = (): JSX.Element => {
+  const status = useAiAssistantManagementModalStatus();
+
+  const AiAssistantManagementModal = useLazyLoader<AiAssistantManagementModalProps>(
+    'ai-assistant-management-modal',
+    () => import('./AiAssistantManagementModal').then(mod => ({ default: mod.AiAssistantManagementModal })),
+    status?.isOpened ?? false,
+  );
+
+  return AiAssistantManagementModal ? <AiAssistantManagementModal /> : <></>;
+};

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/index.ts

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