From 2b9765fb35126161b8ce17d99878aee89389f337 Mon Sep 17 00:00:00 2001
From: Philip Okugbe <phil@docmost.com>
Date: Mon, 2 Sep 2024 15:51:28 +0100
Subject: [PATCH] lazy load (#237)

---
 .../client/src/components/ui/emoji-picker.tsx | 35 ++++++++--------
 .../components/code-block/code-block-view.tsx | 40 ++++++++++++-------
 .../components/excalidraw/excalidraw-view.tsx | 29 ++++++++++----
 3 files changed, 65 insertions(+), 39 deletions(-)

diff --git a/apps/client/src/components/ui/emoji-picker.tsx b/apps/client/src/components/ui/emoji-picker.tsx
index c0fe3c45..c352df69 100644
--- a/apps/client/src/components/ui/emoji-picker.tsx
+++ b/apps/client/src/components/ui/emoji-picker.tsx
@@ -1,13 +1,14 @@
-import React, { ReactNode } from "react";
-import data from "@emoji-mart/data";
-import Picker from "@emoji-mart/react";
+import React, { ReactNode } from 'react';
 import {
   ActionIcon,
   Popover,
   Button,
   useMantineColorScheme,
-} from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { Suspense } from 'react';
+
+const Picker = React.lazy(() => import('@emoji-mart/react'));
 
 export interface EmojiPickerInterface {
   onEmojiSelect: (emoji: any) => void;
@@ -48,23 +49,25 @@ function EmojiPicker({
           {icon}
         </ActionIcon>
       </Popover.Target>
-      <Popover.Dropdown bg="000" style={{ border: "none" }}>
-        <Picker
-          data={data}
-          onEmojiSelect={handleEmojiSelect}
-          perLine={8}
-          skinTonePosition="search"
-          theme={colorScheme}
-        />
+      <Popover.Dropdown bg="000" style={{ border: 'none' }}>
+        <Suspense fallback={null}>
+          <Picker
+            data={async () => (await import('@emoji-mart/data')).default}
+            onEmojiSelect={handleEmojiSelect}
+            perLine={8}
+            skinTonePosition="search"
+            theme={colorScheme}
+          />
+        </Suspense>
         <Button
           variant="default"
           c="gray"
           size="xs"
           style={{
-            position: "absolute",
+            position: 'absolute',
             zIndex: 2,
-            bottom: "1rem",
-            right: "1rem",
+            bottom: '1rem',
+            right: '1rem',
           }}
           onClick={handleRemoveEmoji}
         >
diff --git a/apps/client/src/features/editor/components/code-block/code-block-view.tsx b/apps/client/src/features/editor/components/code-block/code-block-view.tsx
index 1cff51ce..f01e8cc6 100644
--- a/apps/client/src/features/editor/components/code-block/code-block-view.tsx
+++ b/apps/client/src/features/editor/components/code-block/code-block-view.tsx
@@ -1,15 +1,21 @@
-import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
-import { ActionIcon, CopyButton, Group, Select, Tooltip } from "@mantine/core";
-import { useEffect, useState } from "react";
-import { IconCheck, IconCopy } from "@tabler/icons-react";
-import MermaidView from "@/features/editor/components/code-block/mermaid-view.tsx";
-import classes from "./code-block.module.css";
+import { NodeViewContent, NodeViewProps, NodeViewWrapper } from '@tiptap/react';
+import { ActionIcon, CopyButton, Group, Select, Tooltip } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { IconCheck, IconCopy } from '@tabler/icons-react';
+//import MermaidView from "@/features/editor/components/code-block/mermaid-view.tsx";
+import classes from './code-block.module.css';
+import React from 'react';
+import { Suspense } from 'react';
+
+const MermaidView = React.lazy(
+  () => import('@/features/editor/components/code-block/mermaid-view.tsx')
+);
 
 export default function CodeBlockView(props: NodeViewProps) {
   const { node, updateAttributes, extension, editor, getPos } = props;
   const { language } = node.attrs;
   const [languageValue, setLanguageValue] = useState<string | null>(
-    language || null,
+    language || null
   );
   const [isSelected, setIsSelected] = useState(false);
 
@@ -24,9 +30,9 @@ export default function CodeBlockView(props: NodeViewProps) {
       setIsSelected(isNodeSelected);
     };
 
-    editor.on("selectionUpdate", updateSelection);
+    editor.on('selectionUpdate', updateSelection);
     return () => {
-      editor.off("selectionUpdate", updateSelection);
+      editor.off('selectionUpdate', updateSelection);
     };
   }, [editor, getPos(), node.nodeSize]);
 
@@ -47,7 +53,7 @@ export default function CodeBlockView(props: NodeViewProps) {
           value={languageValue}
           onChange={changeLanguage}
           searchable
-          style={{ maxWidth: "130px" }}
+          style={{ maxWidth: '130px' }}
           classNames={{ input: classes.selectInput }}
           disabled={!editor.isEditable}
         />
@@ -55,12 +61,12 @@ export default function CodeBlockView(props: NodeViewProps) {
         <CopyButton value={node?.textContent} timeout={2000}>
           {({ copied, copy }) => (
             <Tooltip
-              label={copied ? "Copied" : "Copy"}
+              label={copied ? 'Copied' : 'Copy'}
               withArrow
               position="right"
             >
               <ActionIcon
-                color={copied ? "teal" : "gray"}
+                color={copied ? 'teal' : 'gray'}
                 variant="subtle"
                 onClick={copy}
               >
@@ -74,15 +80,19 @@ export default function CodeBlockView(props: NodeViewProps) {
       <pre
         spellCheck="false"
         hidden={
-          ((language === "mermaid" && !editor.isEditable) ||
-            (language === "mermaid" && !isSelected)) &&
+          ((language === 'mermaid' && !editor.isEditable) ||
+            (language === 'mermaid' && !isSelected)) &&
           node.textContent.length > 0
         }
       >
         <NodeViewContent as="code" className={`language-${language}`} />
       </pre>
 
-      {language === "mermaid" && <MermaidView props={props} />}
+      {language === 'mermaid' && (
+        <Suspense fallback={null}>
+          <MermaidView props={props} />
+        </Suspense>
+      )}
     </NodeViewWrapper>
   );
 }
diff --git a/apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx b/apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx
index bc6aea89..b32b702a 100644
--- a/apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx
+++ b/apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx
@@ -9,7 +9,6 @@ import {
   useComputedColorScheme,
 } from '@mantine/core';
 import { useState } from 'react';
-import { Excalidraw, exportToSvg, loadFromBlob } from '@excalidraw/excalidraw';
 import { uploadFile } from '@/features/page/services/page-service.ts';
 import { svgStringToFile } from '@/lib';
 import { useDisclosure } from '@mantine/hooks';
@@ -19,6 +18,14 @@ import { IAttachment } from '@/lib/types';
 import ReactClearModal from 'react-clear-modal';
 import clsx from 'clsx';
 import { IconEdit } from '@tabler/icons-react';
+import { lazy } from 'react';
+import { Suspense } from 'react';
+
+const Excalidraw = lazy(() =>
+  import('@excalidraw/excalidraw').then((module) => ({
+    default: module.Excalidraw,
+  }))
+);
 
 export default function ExcalidrawView(props: NodeViewProps) {
   const { node, updateAttributes, editor, selected } = props;
@@ -43,6 +50,8 @@ export default function ExcalidrawView(props: NodeViewProps) {
           cache: 'no-store',
         });
 
+        const { loadFromBlob } = await import('@excalidraw/excalidraw');
+
         const data = await loadFromBlob(await request.blob(), null, null);
         setExcalidrawData(data);
       }
@@ -58,6 +67,8 @@ export default function ExcalidrawView(props: NodeViewProps) {
       return;
     }
 
+    const { exportToSvg } = await import('@excalidraw/excalidraw');
+
     const svg = await exportToSvg({
       elements: excalidrawAPI?.getSceneElements(),
       appState: {
@@ -129,13 +140,15 @@ export default function ExcalidrawView(props: NodeViewProps) {
           </Button>
         </Group>
         <div style={{ height: '90vh' }}>
-          <Excalidraw
-            excalidrawAPI={(api) => setExcalidrawAPI(api)}
-            initialData={{
-              ...excalidrawData,
-              scrollToContent: true,
-            }}
-          />
+          <Suspense fallback={null}>
+            <Excalidraw
+              excalidrawAPI={(api) => setExcalidrawAPI(api)}
+              initialData={{
+                ...excalidrawData,
+                scrollToContent: true,
+              }}
+            />
+          </Suspense>
         </div>
       </ReactClearModal>