Lazy load EditorGuideModal

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

@@ -0,0 +1,17 @@
+import type { JSX } from 'react';
+
+import { useEditorGuideModalStatus } from '@growi/editor/dist/states/modal/editor-guide';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+
+export const EditorGuideModalLazyLoaded = (): JSX.Element => {
+  const { isOpened } = useEditorGuideModalStatus();
+
+  const EditorGuideModal = useLazyLoader(
+    'editor-guide-modal',
+    () => import('./EditorGuideModal').then(mod => ({ default: mod.EditorGuideModal })),
+    isOpened,
+  );
+
+  return EditorGuideModal ? <EditorGuideModal /> : <></>;
+};

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

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

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

@@ -8,7 +8,7 @@ import { useRendererConfig } from '~/states/server-configurations';
 
 import { SlideRenderer } from '../Page/SlideRenderer';
 
-import { EditorGuideModal } from './EditorGuideModal';
+import { EditorGuideModalLazyLoaded } from './EditorGuideModal';
 
 import styles from './Preview.module.scss';
 
@@ -43,7 +43,7 @@ const Preview = (props: Props): JSX.Element => {
       className={`${moduleClass} ${fluidLayoutClass} ${pagePath === '/Sidebar' ? 'preview-sidebar' : ''} position-relative`}
       style={style}
     >
-      <EditorGuideModal />
+      <EditorGuideModalLazyLoaded />
 
       { markdown != null
         && (