optimize some modals

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

@@ -79,7 +79,7 @@ const GrantedGroupsInheritanceSelectModalSubstance = (props: GrantedGroupsInheri
 /**
  * GrantedGroupsInheritanceSelectModal - Container component (lightweight, always rendered)
  */
-const GrantedGroupsInheritanceSelectModal = (): React.JSX.Element => {
+export const GrantedGroupsInheritanceSelectModal = (): React.JSX.Element => {
   const { isOpened, onCreateBtnClick } = useGrantedGroupsInheritanceSelectModalStatus();
   const { close: closeModal } = useGrantedGroupsInheritanceSelectModalActions();
 
@@ -97,5 +97,3 @@ const GrantedGroupsInheritanceSelectModal = (): React.JSX.Element => {
     </Modal>
   );
 };
-
-export default GrantedGroupsInheritanceSelectModal;

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

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

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

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

apps/app/src/client/components/PageAttachment/DeleteAttachmentModal.tsx

@@ -114,18 +114,18 @@ const DeleteAttachmentModalSubstance = ({
         <div className="me-3 d-inline-block">
           {deletingIndicator}
         </div>
+        <Button
+          color="outline-neutral-secondary"
+          onClick={toggleHandler}
+        >
+          {t('commons:Cancel')}
+        </Button>
         <Button
           color="danger"
           onClick={onClickDeleteButtonHandler}
           disabled={deleting}
         >{t('commons:Delete')}
         </Button>
-        <Button
-          color="secondary"
-          onClick={toggleHandler}
-        >
-          {t('modal_delete.cancel')}
-        </Button>
       </ModalFooter>
     </div>
   );

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

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

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

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

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

@@ -16,14 +16,14 @@ import { usePresentationModalActions, usePresentationModalStatus } from '~/state
 import { useNextThemes } from '~/stores-universal/use-next-themes';
 import { usePresentationViewOptions } from '~/stores/renderer';
 
-import { RendererErrorMessage } from './Common/RendererErrorMessage';
+import { RendererErrorMessage } from '../Common/RendererErrorMessage';
 
 import styles from './PagePresentationModal.module.scss';
 
 const moduleClass = styles['grw-presentation-modal'] ?? '';
 
 
-const Presentation = dynamic<PresentationProps>(() => import('./Presentation/Presentation').then(mod => mod.Presentation), {
+const Presentation = dynamic<PresentationProps>(() => import('../Presentation/Presentation').then(mod => mod.Presentation), {
   ssr: false,
   loading: () => (
     <LoadingSpinner className="text-muted fs-1" />
@@ -103,7 +103,7 @@ const PagePresentationModalSubstance: React.FC = () => {
 /**
  * PagePresentationModal - Container component (lightweight, always rendered)
  */
-const PagePresentationModal = (): React.JSX.Element => {
+export const PagePresentationModal = (): React.JSX.Element => {
   const presentationModalData = usePresentationModalStatus();
   const { close: closePresentationModal } = usePresentationModalActions();
 
@@ -129,5 +129,3 @@ const PagePresentationModal = (): React.JSX.Element => {
     </Modal>
   );
 };
-
-export default PagePresentationModal;

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

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

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

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

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

@@ -1,157 +1,141 @@
-import dynamic from "next/dynamic";
 import type { JSX, ReactNode } from 'react';
+import dynamic from 'next/dynamic';
 
-// eslint-disable-next-line no-restricted-imports
-import { PageAccessoriesModalLazyLoaded } from "~/client/components/PageAccessoriesModal";
-// eslint-disable-next-line no-restricted-imports
-import { PageDeleteModalLazyLoaded } from "~/client/components/PageDeleteModal";
-// eslint-disable-next-line no-restricted-imports
-import { PageDuplicateModalLazyLoaded } from "~/client/components/PageDuplicateModal";
-// eslint-disable-next-line no-restricted-imports
-import { PageRenameModalLazyLoaded } from "~/client/components/PageRenameModal";
-// eslint-disable-next-line no-restricted-imports
-import { ShortcutsModalLazyLoaded } from "~/client/components/ShortcutsModal";
-import styles from "./BasicLayout.module.scss";
-import { RawLayout } from "./RawLayout";
+import { GrantedGroupsInheritanceSelectModalLazyLoaded } from '~/client/components/GrantedGroupsInheritanceSelectModal';
+import { PageAccessoriesModalLazyLoaded } from '~/client/components/PageAccessoriesModal';
+import { PageDeleteModalLazyLoaded } from '~/client/components/PageDeleteModal';
+import { PageDuplicateModalLazyLoaded } from '~/client/components/PageDuplicateModal';
+import { PagePresentationModalLazyLoaded } from '~/client/components/PagePresentationModal';
+import { PageRenameModalLazyLoaded } from '~/client/components/PageRenameModal';
+import { ShortcutsModalLazyLoaded } from '~/client/components/ShortcutsModal';
+import { PageBulkExportSelectModalLazyLoaded } from '~/features/page-bulk-export/client/components';
+
+import { RawLayout } from './RawLayout';
+
+import styles from './BasicLayout.module.scss';
 
 const AiAssistantSidebar = dynamic(
-	() =>
-		import(
-			"~/features/openai/client/components/AiAssistant/AiAssistantSidebar/AiAssistantSidebar"
-		).then((mod) => mod.AiAssistantSidebar),
-	{ ssr: false },
+  () =>
+    import(
+      '~/features/openai/client/components/AiAssistant/AiAssistantSidebar/AiAssistantSidebar'
+    ).then((mod) => mod.AiAssistantSidebar),
+  { ssr: false },
 );
 
-const moduleClass = styles["grw-basic-layout"] ?? "";
+const moduleClass = styles['grw-basic-layout'] ?? '';
 
 const Sidebar = dynamic(
-	() => import("~/client/components/Sidebar").then((mod) => mod.Sidebar),
-	{ ssr: false },
+  () => import('~/client/components/Sidebar').then((mod) => mod.Sidebar),
+  { ssr: false },
 );
 
 const AlertSiteUrlUndefined = dynamic(
-	() =>
-		import("~/client/components/AlertSiteUrlUndefined").then(
-			(mod) => mod.AlertSiteUrlUndefined,
-		),
-	{ ssr: false },
+  () =>
+    import('~/client/components/AlertSiteUrlUndefined').then(
+      (mod) => mod.AlertSiteUrlUndefined,
+    ),
+  { ssr: false },
 );
 const DeleteAttachmentModal = dynamic(
-	() =>
-		import("~/client/components/PageAttachment/DeleteAttachmentModal").then(
-			(mod) => mod.DeleteAttachmentModal,
-		),
-	{ ssr: false },
+  () =>
+    import('~/client/components/PageAttachment/DeleteAttachmentModal').then(
+      (mod) => mod.DeleteAttachmentModal,
+    ),
+  { ssr: false },
 );
 const HotkeysManager = dynamic(
-	() => import("~/client/components/Hotkeys/HotkeysManager"),
-	{ ssr: false },
+  () => import('~/client/components/Hotkeys/HotkeysManager'),
+  { ssr: false },
 );
 const GrowiNavbarBottom = dynamic(
-	() =>
-		import("~/client/components/Navbar/GrowiNavbarBottom").then(
-			(mod) => mod.GrowiNavbarBottom,
-		),
-	{ ssr: false },
+  () =>
+    import('~/client/components/Navbar/GrowiNavbarBottom').then(
+      (mod) => mod.GrowiNavbarBottom,
+    ),
+  { ssr: false },
 );
 const SystemVersion = dynamic(
-	() => import("~/client/components/SystemVersion"),
-	{ ssr: false },
+  () => import('~/client/components/SystemVersion'),
+  { ssr: false },
 );
 const PutbackPageModal = dynamic(
-	() => import("~/client/components/PutbackPageModal"),
-	{ ssr: false },
+  () => import('~/client/components/PutbackPageModal'),
+  { ssr: false },
 );
 // Page modals
 const PageCreateModal = dynamic(
-	() => import("~/client/components/PageCreateModal"),
-	{ ssr: false },
-);
-const PagePresentationModal = dynamic(
-	() => import("~/client/components/PagePresentationModal"),
-	{ ssr: false },
-);
-const GrantedGroupsInheritanceSelectModal = dynamic(
-	() => import("~/client/components/GrantedGroupsInheritanceSelectModal"),
-	{ ssr: false },
+  () => import('~/client/components/PageCreateModal'),
+  { ssr: false },
 );
 const DeleteBookmarkFolderModal = dynamic(
-	() =>
-		import("~/client/components/DeleteBookmarkFolderModal").then(
-			(mod) => mod.DeleteBookmarkFolderModal,
-		),
-	{ ssr: false },
+  () =>
+    import('~/client/components/DeleteBookmarkFolderModal').then(
+      (mod) => mod.DeleteBookmarkFolderModal,
+    ),
+  { ssr: false },
 );
 const SearchModal = dynamic(
-	() => import("~/features/search/client/components/SearchModal"),
-	{ ssr: false },
-);
-const PageBulkExportSelectModal = dynamic(
-	() =>
-		import(
-			"~/features/page-bulk-export/client/components/PageBulkExportSelectModal"
-		),
-	{ ssr: false },
+  () => 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 },
+  () =>
+    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 },
+  () =>
+    import('~/client/components/PageSelectModal/PageSelectModal').then(
+      (mod) => mod.PageSelectModal,
+    ),
+  { ssr: false },
 );
 
 type Props = {
-	children?: ReactNode;
-	className?: string;
+  children?: ReactNode;
+  className?: string;
 };
 
 export const BasicLayout = ({ children, className }: Props): JSX.Element => {
-	return (
-		<RawLayout className={`${moduleClass} ${className ?? ""}`}>
-			<div className="page-wrapper flex-row">
-				<div className="z-2 d-print-none">
-					<Sidebar />
-				</div>
+  return (
+    <RawLayout className={`${moduleClass} ${className ?? ''}`}>
+      <div className="page-wrapper flex-row">
+        <div className="z-2 d-print-none">
+          <Sidebar />
+        </div>
 
-				<div className="d-flex flex-grow-1 flex-column mw-0 z-1">
-					{/* neccessary for nested {children} make expanded */}
-					<AlertSiteUrlUndefined />
-					{children}
-				</div>
+        <div className="d-flex flex-grow-1 flex-column mw-0 z-1">
+          {/* neccessary for nested {children} make expanded */}
+          <AlertSiteUrlUndefined />
+          {children}
+        </div>
 
-				<AiAssistantSidebar />
-			</div>
+        <AiAssistantSidebar />
+      </div>
 
-			<GrowiNavbarBottom />
-			<SearchModal />
+      <GrowiNavbarBottom />
+      <SearchModal />
 
-			<PageCreateModal />
-			<PageDuplicateModalLazyLoaded />
-			<PageDeleteModalLazyLoaded />
-			<PageRenameModalLazyLoaded />
-			<PageAccessoriesModalLazyLoaded />
-			<DeleteAttachmentModal />
-			<DeleteBookmarkFolderModal />
-			<PutbackPageModal />
-			<PageSelectModal />
-			<AiAssistantManagementModal />
+      <PageCreateModal />
+      <PageDuplicateModalLazyLoaded />
+      <PageDeleteModalLazyLoaded />
+      <PageRenameModalLazyLoaded />
+      <PageAccessoriesModalLazyLoaded />
+      <DeleteAttachmentModal />
+      <DeleteBookmarkFolderModal />
+      <PutbackPageModal />
+      <PageSelectModal />
+      <AiAssistantManagementModal />
 
-			<PagePresentationModal />
-			<HotkeysManager />
+      <PagePresentationModalLazyLoaded />
+      <HotkeysManager />
 
-			<ShortcutsModalLazyLoaded />
-			<PageBulkExportSelectModal />
-			<GrantedGroupsInheritanceSelectModal />
-			<SystemVersion showShortcutsButton />
-		</RawLayout>
-	);
+      <ShortcutsModalLazyLoaded />
+      <PageBulkExportSelectModalLazyLoaded />
+      <GrantedGroupsInheritanceSelectModalLazyLoaded />
+      <SystemVersion showShortcutsButton />
+    </RawLayout>
+  );
 };

apps/app/src/features/page-bulk-export/client/components/PageBulkExportSelectModal.tsx

@@ -159,7 +159,7 @@ const PageBulkExportSelectModalSubstance = (): JSX.Element => {
   );
 };
 
-const PageBulkExportSelectModal = (): JSX.Element => {
+export const PageBulkExportSelectModal = (): JSX.Element => {
   const status = usePageBulkExportSelectModalStatus();
 
   return (
@@ -168,5 +168,3 @@ const PageBulkExportSelectModal = (): JSX.Element => {
     </Modal>
   );
 };
-
-export default PageBulkExportSelectModal;

apps/app/src/features/page-bulk-export/client/components/dynamic.tsx

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

apps/app/src/features/page-bulk-export/client/components/index.ts

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

packages/presentation/src/client/components/Presentation.tsx

@@ -1,4 +1,4 @@
-import { type JSX, useEffect } from 'react';
+import { type JSX, useEffect, useRef } from 'react';
 import Reveal from 'reveal.js';
 
 import type { PresentationOptions } from '../consts';
@@ -37,12 +37,13 @@ export type PresentationProps = {
 export const Presentation = (props: PresentationProps): JSX.Element => {
   const { options, marp, children } = props;
   const { revealOptions } = options;
+  const deckRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (children == null) {
+    if (children == null || deckRef.current == null) {
       return;
     }
-    const deck = new Reveal({ ...baseRevealOptions, ...revealOptions });
+    const deck = new Reveal(deckRef.current, { ...baseRevealOptions, ...revealOptions });
     deck.initialize().then(() => deck.slide(0)); // navigate to the first slide
 
     deck.on('ready', removeAllHiddenElements);
@@ -55,7 +56,7 @@ export const Presentation = (props: PresentationProps): JSX.Element => {
   }, [children, revealOptions]);
 
   return (
-    <div className={`${moduleClass} reveal`}>
+    <div ref={deckRef} className={`${moduleClass} reveal`}>
       <Slides options={options} hasMarpFlag={marp} presentation>
         {children}
       </Slides>