From fc1377bcfb4981c288332d79bf043cae4307d148 Mon Sep 17 00:00:00 2001
From: DiamondThree <diamond.shx@gmail.com>
Date: Thu, 4 Aug 2022 19:01:04 +0800
Subject: [PATCH] add loding style

---
 .../src/components/source-view/SourceView.tsx | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/libs/components/editor-blocks/src/components/source-view/SourceView.tsx b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx
index 9b5c81367..f8264e8f1 100644
--- a/libs/components/editor-blocks/src/components/source-view/SourceView.tsx
+++ b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx
@@ -135,10 +135,27 @@ const LazyIframe = ({
             >
                 <iframe src={src} onLoad={onLoad} />
             </div>
+            {show ? '' : fallback}
         </>
     );
 };
 
+const Loading = styled('div')(() => {
+    return {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        lineHeight: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: '1px solid #EAEEF2',
+    };
+});
+
+const LoadingContiner = () => {
+    return <Loading>loading...</Loading>;
+};
+
 export const SourceView: FC<Props> = props => {
     const { link, isSelected, block, editorElement } = props;
     const src = formatUrl(link);
@@ -151,7 +168,10 @@ export const SourceView: FC<Props> = props => {
                 <SourceViewContainer isSelected={isSelected} scene={type}>
                     <MouseMaskContainer />
 
-                    <LazyIframe src={src} fallback={'Loading……'}></LazyIframe>
+                    <LazyIframe
+                        src={src}
+                        fallback={LoadingContiner()}
+                    ></LazyIframe>
                 </SourceViewContainer>
             </div>
         );