From 242e074ae67fb8a10f83d0683e1c428626898866 Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Tue, 9 May 2023 12:57:36 +0800
Subject: [PATCH] feat: add suspense fallback for editor (#2278)

---
 .../components/block-suite-editor/index.css.ts  |  5 +++++
 .../src/components/block-suite-editor/index.tsx | 17 ++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 packages/component/src/components/block-suite-editor/index.css.ts

diff --git a/packages/component/src/components/block-suite-editor/index.css.ts b/packages/component/src/components/block-suite-editor/index.css.ts
new file mode 100644
index 0000000000..a3b38b41d5
--- /dev/null
+++ b/packages/component/src/components/block-suite-editor/index.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const blockSuiteEditorStyle = style({
+  padding: '0 1rem',
+});
diff --git a/packages/component/src/components/block-suite-editor/index.tsx b/packages/component/src/components/block-suite-editor/index.tsx
index 2e1557a8a0..39b8607d74 100644
--- a/packages/component/src/components/block-suite-editor/index.tsx
+++ b/packages/component/src/components/block-suite-editor/index.tsx
@@ -3,12 +3,15 @@ import type { BlockHub } from '@blocksuite/blocks';
 import type { EditorContainer } from '@blocksuite/editor';
 import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
+import { Skeleton } from '@mui/material';
 import { useAtomValue } from 'jotai';
 import type { CSSProperties, ReactElement } from 'react';
 import { memo, Suspense, useCallback, useEffect, useRef } from 'react';
 import type { FallbackProps } from 'react-error-boundary';
 import { ErrorBoundary } from 'react-error-boundary';
 
+import { blockSuiteEditorStyle } from './index.css';
+
 export type EditorProps = {
   page: Page;
   mode: 'page' | 'edgeless';
@@ -122,6 +125,18 @@ const BlockSuiteErrorFallback = (
   );
 };
 
+export const BlockSuiteFallback = memo(function BlockSuiteFallback() {
+  return (
+    <div className={blockSuiteEditorStyle}>
+      <Skeleton animation="wave" height={60} />
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Skeleton animation="wave" height={30} key={index} />
+      ))}
+      <Skeleton animation="wave" height={30} width="40%" />
+    </div>
+  );
+});
+
 export const BlockSuiteEditor = memo(function BlockSuiteEditor(
   props: EditorProps & ErrorBoundaryProps
 ): ReactElement {
@@ -134,7 +149,7 @@ export const BlockSuiteEditor = memo(function BlockSuiteEditor(
         [props.onReset]
       )}
     >
-      <Suspense fallback={null}>
+      <Suspense fallback={<BlockSuiteFallback />}>
         <BlockSuiteEditorImpl {...props} />
       </Suspense>
     </ErrorBoundary>