add loding style

This commit is contained in:
DiamondThree
2022-08-04 19:01:04 +08:00
parent 9708f0dc0d
commit fc1377bcfb

View File

@@ -135,10 +135,27 @@ const LazyIframe = ({
> >
<iframe src={src} onLoad={onLoad} /> <iframe src={src} onLoad={onLoad} />
</div> </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 => { export const SourceView: FC<Props> = props => {
const { link, isSelected, block, editorElement } = props; const { link, isSelected, block, editorElement } = props;
const src = formatUrl(link); const src = formatUrl(link);
@@ -151,7 +168,10 @@ export const SourceView: FC<Props> = props => {
<SourceViewContainer isSelected={isSelected} scene={type}> <SourceViewContainer isSelected={isSelected} scene={type}>
<MouseMaskContainer /> <MouseMaskContainer />
<LazyIframe src={src} fallback={'Loading……'}></LazyIframe> <LazyIframe
src={src}
fallback={LoadingContiner()}
></LazyIframe>
</SourceViewContainer> </SourceViewContainer>
</div> </div>
); );