optimize some modals

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

@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '../../util/use-lazy-loader';
+
+type CreateTemplateModalProps = {
+  path: string;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const CreateTemplateModalLazyLoaded = (props: CreateTemplateModalProps): JSX.Element => {
+  const CreateTemplateModal = useLazyLoader<CreateTemplateModalProps>(
+    'create-template-modal',
+    () => import('./CreateTemplateModal').then(mod => ({ default: mod.CreateTemplateModal })),
+    props.isOpen,
+  );
+
+  return CreateTemplateModal != null ? <CreateTemplateModal {...props} /> : <></>;
+};

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

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

apps/app/src/client/components/EmptyTrashModal.tsx → apps/app/src/client/components/EmptyTrashModal/EmptyTrashModal.tsx

@@ -10,7 +10,7 @@ import {
 import { apiv3Delete } from '~/client/util/apiv3-client';
 import { useEmptyTrashModalStatus, useEmptyTrashModalActions } from '~/states/ui/modal/empty-trash';
 
-import ApiErrorMessageList from './PageManagement/ApiErrorMessageList';
+import ApiErrorMessageList from '../PageManagement/ApiErrorMessageList';
 
 /**
  * EmptyTrashModalSubstance - Presentation component (all logic here)
@@ -98,7 +98,7 @@ const EmptyTrashModalSubstance = ({
 /**
  * EmptyTrashModal - Container component (lightweight, always rendered)
  */
-const EmptyTrashModal: FC = () => {
+export const EmptyTrashModal: FC = () => {
   const { isOpened, pages, opts } = useEmptyTrashModalStatus();
   const { close: closeModal } = useEmptyTrashModalActions();
 
@@ -115,5 +115,3 @@ const EmptyTrashModal: FC = () => {
     </Modal>
   );
 };
-
-export default EmptyTrashModal;

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

@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+
+import { useEmptyTrashModalStatus } from '~/states/ui/modal/empty-trash';
+
+import { useLazyLoader } from '../../util/use-lazy-loader';
+
+type EmptyTrashModalProps = Record<string, unknown>;
+
+export const EmptyTrashModalLazyLoaded = (): JSX.Element => {
+  const status = useEmptyTrashModalStatus();
+
+  const EmptyTrashModal = useLazyLoader<EmptyTrashModalProps>(
+    'empty-trash-modal',
+    () => import('./EmptyTrashModal').then(mod => ({ default: mod.EmptyTrashModal })),
+    status?.isOpened ?? false,
+  );
+
+  return EmptyTrashModal != null ? <EmptyTrashModal /> : <></>;
+};

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

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

apps/app/src/client/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -51,6 +51,7 @@ import {
 } from '~/stores/page';
 import { mutatePageTree, mutateRecentlyUpdated } from '~/stores/page-listing';
 
+import { CreateTemplateModalLazyLoaded } from '../CreateTemplateModal';
 import { NotAvailable } from '../NotAvailable';
 import { Skeleton } from '../Skeleton';
 
@@ -58,8 +59,6 @@ import styles from './GrowiContextualSubNavigation.module.scss';
 import PageEditorModeManagerStyles from './PageEditorModeManager.module.scss';
 
 
-const CreateTemplateModal = dynamic(() => import('../CreateTemplateModal').then(mod => mod.CreateTemplateModal), { ssr: false });
-
 const PageEditorModeManager = dynamic(
   () => import('./PageEditorModeManager').then(mod => mod.PageEditorModeManager),
   { ssr: false, loading: () => <Skeleton additionalClass={`${PageEditorModeManagerStyles['grw-page-editor-mode-manager-skeleton']}`} /> },
@@ -461,7 +460,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
       </Sticky>
 
       {path != null && currentUser != null && !isReadOnlyUser && (
-        <CreateTemplateModal
+        <CreateTemplateModalLazyLoaded
           path={path}
           isOpen={isPageTemplateModalShown}
           onClose={() => setIsPageTempleteModalShown(false)}

apps/app/src/pages/trash/index.page.tsx

@@ -1,5 +1,4 @@
 import type { JSX, ReactNode } from 'react';
-import React from 'react';
 import type { GetServerSideProps, GetServerSidePropsContext } from 'next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
@@ -9,6 +8,7 @@ import {
   isUsersTopPage,
 } from '@growi/core/dist/utils/page-path-utils';
 
+import { EmptyTrashModalLazyLoaded } from '~/client/components/EmptyTrashModal';
 import { PagePathNavTitle } from '~/components/Common/PagePathNavTitle';
 import { BasicLayout } from '~/components/Layout/BasicLayout';
 import { GroundGlassBar } from '~/components/Navbar/GroundGlassBar';
@@ -37,10 +37,6 @@ const TrashPageList = dynamic(
     ),
   { ssr: false },
 );
-const EmptyTrashModal = dynamic(
-  () => import('~/client/components/EmptyTrashModal'),
-  { ssr: false },
-);
 
 type Props = CommonInitialProps &
   CommonEachProps &
@@ -96,7 +92,7 @@ TrashPage.getLayout = function getLayout(page) {
   return (
     <>
       <Layout {...page.props}>{page}</Layout>
-      <EmptyTrashModal />
+      <EmptyTrashModalLazyLoaded />
     </>
   );
 };