From 7635b6d8ac6404c43fb4c270c7ceaff9902ae1ed Mon Sep 17 00:00:00 2001
From: 2nthony <ant.hu@outlook.com>
Date: Wed, 3 Jul 2024 13:27:17 +0800
Subject: [PATCH] feat(universe-editor): add `loadingSkeleton` prop and lazy
 load WYSIWYG

---
 src/universeEditor.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/universeEditor.tsx b/src/universeEditor.tsx
index 445ec42..1795a65 100644
--- a/src/universeEditor.tsx
+++ b/src/universeEditor.tsx
@@ -2,13 +2,14 @@ import * as React from "react";
 import MarkdownEditor from "./markdown";
 import { Suggestion } from "./types/suggestion";
 import { ReactElement, useState } from "react";
-import WYSIWYG from "../src/WYSIWYG";
 import styled, { css } from "styled-components";
 import Toggle from "../src/components/Toggle";
 import MarkdownIcon from "../src/components/MarkdownIcon";
 import InsertContentsModal from "./components/modal";
 import { Plugin as PreviewerPlugin } from "@osn/previewer/dist/types";
 
+const WYSIWYG = React.lazy(() => import("../src/WYSIWYG"));
+
 interface WrapperProps {
   $active: boolean;
 }
@@ -43,6 +44,7 @@ type Props = {
   toggleBarLeft?: React.ReactNode;
   onChangePreviewMode?: (isPreview: boolean) => void;
   setTextAreaRef?: (textarea: HTMLTextAreaElement) => void;
+  loadingSkeleton?: React.SuspenseProps["fallback"];
 };
 
 const ToggleBar = styled.div`
@@ -80,6 +82,7 @@ export const UniverseEditor = React.forwardRef<HTMLDivElement, Props>(
       toggleBarLeft,
       onChangePreviewMode = () => {},
       setTextAreaRef = () => {},
+      loadingSkeleton,
     },
     ref,
   ) => {
@@ -117,7 +120,7 @@ export const UniverseEditor = React.forwardRef<HTMLDivElement, Props>(
             setTextAreaRef={setTextAreaRef}
           />
         ) : (
-          <>
+          <React.Suspense fallback={loadingSkeleton}>
             <InsertContentsModal
               showModal={showModal}
               setShowModal={setShowModal}
@@ -140,7 +143,7 @@ export const UniverseEditor = React.forwardRef<HTMLDivElement, Props>(
               previewerPlugins={previewerPlugins}
               onChangePreviewMode={onChangePreviewMode}
             />
-          </>
+          </React.Suspense>
         )}
 
         <ToggleBar className="toggle-bar-wrapper">