add ShortcutsModal and dynamic loading support

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

@@ -193,7 +193,7 @@ const ShortcutsModalSubstance = (): React.JSX.Element => {
               <li className="d-flex align-items-center p-3 border-bottom">
                 <div className="flex-grow-1">
                   <span
-                  // eslint-disable-next-line react/no-danger
+                    // eslint-disable-next-line react/no-danger
                     dangerouslySetInnerHTML={{ __html: t('modal_shortcuts.editor.Insert Line') }}
                   />
                   <br />
@@ -416,7 +416,7 @@ const ShortcutsModalSubstance = (): React.JSX.Element => {
 /**
  * ShortcutsModal - Container component (lightweight, always rendered)
  */
-const ShortcutsModal = (): React.JSX.Element => {
+export const ShortcutsModal = (): React.JSX.Element => {
   const status = useShortcutsModalStatus();
   const { close } = useShortcutsModalActions();
 
@@ -426,5 +426,3 @@ const ShortcutsModal = (): React.JSX.Element => {
     </Modal>
   );
 };
-
-export default ShortcutsModal;

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

@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/client/util/use-lazy-loader';
+import { useShortcutsModalStatus } from '~/states/ui/modal/shortcuts';
+
+type ShortcutsModalProps = Record<string, unknown>;
+
+export const ShortcutsModalDynamic = (): JSX.Element => {
+  const status = useShortcutsModalStatus();
+
+  const ShortcutsModal = useLazyLoader<ShortcutsModalProps>(
+    'shortcuts-modal',
+    () => import('./ShortcutsModal').then(mod => ({ default: mod.ShortcutsModal })),
+    status?.isOpened ?? false,
+  );
+
+  // ShortcutsModal handles early return and fadeout transition internally
+  return ShortcutsModal ? <ShortcutsModal /> : <></>;
+};

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

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

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

@@ -5,6 +5,8 @@ import dynamic from 'next/dynamic';
 
 // eslint-disable-next-line no-restricted-imports
 import { PageAccessoriesModalDynamic } from '~/client/components/PageAccessoriesModal';
+// eslint-disable-next-line no-restricted-imports
+import { ShortcutsModalDynamic } from '~/client/components/ShortcutsModal';
 
 import { RawLayout } from './RawLayout';
 
@@ -28,7 +30,6 @@ const DeleteAttachmentModal = dynamic(
 );
 const HotkeysManager = dynamic(() => import('~/client/components/Hotkeys/HotkeysManager'), { ssr: false });
 const GrowiNavbarBottom = dynamic(() => import('~/client/components/Navbar/GrowiNavbarBottom').then(mod => mod.GrowiNavbarBottom), { ssr: false });
-const ShortcutsModal = dynamic(() => import('~/client/components/ShortcutsModal'), { ssr: false });
 const SystemVersion = dynamic(() => import('~/client/components/SystemVersion'), { ssr: false });
 const PutbackPageModal = dynamic(() => import('~/client/components/PutbackPageModal'), { ssr: false });
 // Page modals
@@ -89,7 +90,7 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
       <PagePresentationModal />
       <HotkeysManager />
 
-      <ShortcutsModal />
+      <ShortcutsModalDynamic />
       <PageBulkExportSelectModal />
       <GrantedGroupsInheritanceSelectModal />
       <SystemVersion showShortcutsButton />

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

@@ -3,11 +3,13 @@ import React from 'react';
 
 import dynamic from 'next/dynamic';
 
+// eslint-disable-next-line no-restricted-imports
+import { ShortcutsModalDynamic } from '~/client/components/ShortcutsModal';
+
 import { RawLayout } from './RawLayout';
 
 const PageCreateModal = dynamic(() => import('~/client/components/PageCreateModal'), { ssr: false });
 const GrowiNavbarBottom = dynamic(() => import('~/client/components/Navbar/GrowiNavbarBottom').then(mod => mod.GrowiNavbarBottom), { ssr: false });
-const ShortcutsModal = dynamic(() => import('~/client/components/ShortcutsModal'), { ssr: false });
 const SystemVersion = dynamic(() => import('~/client/components/SystemVersion'), { ssr: false });
 
 
@@ -25,7 +27,7 @@ export const ShareLinkLayout = ({ children }: Props): JSX.Element => {
 
       <GrowiNavbarBottom />
 
-      <ShortcutsModal />
+      <ShortcutsModalDynamic />
       <PageCreateModal />
       <SystemVersion showShortcutsButton />
     </RawLayout>