From da699b11bedd43bdb0624a90ac652a5d9e1c98b4 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Mon, 21 Aug 2023 23:28:14 +0800
Subject: [PATCH] docs: add fallback for previewer (#44327)

* docs: add fallback for previewer

* chore: code clean
---
 .dumi/theme/builtins/Previewer/index.tsx | 36 ++++++++++++++++++++----
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx
index ff79fd82a952..b987d57bc3f0 100644
--- a/.dumi/theme/builtins/Previewer/index.tsx
+++ b/.dumi/theme/builtins/Previewer/index.tsx
@@ -1,10 +1,36 @@
 import React, { Suspense } from 'react';
 import type { IPreviewerProps } from 'dumi';
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
 
 const Previewer = React.lazy(() => import('./Previewer'));
 
-export default (props: IPreviewerProps) => (
-  <Suspense fallback={null}>
-    <Previewer {...props} />
-  </Suspense>
-);
+const useStyle = createStyles(({ css }) => ({
+  skeletonWrapper: css`
+    width: 100% !important;
+    height: 500px;
+    margin-bottom: 16px;
+  `,
+}));
+
+export default (props: IPreviewerProps) => {
+  const { styles } = useStyle();
+  return (
+    <Suspense
+      fallback={
+        <Skeleton.Node
+          active
+          className={styles.skeletonWrapper}
+          style={{
+            width: '100%',
+            height: '100%',
+          }}
+        >
+          {' '}
+        </Skeleton.Node>
+      }
+    >
+      <Previewer {...props} />
+    </Suspense>
+  );
+};