@@ -11,6 +11,11 @@ import {
1111import styled from "styled-components" ;
1212import { codeControl } from "comps/controls/codeControl" ;
1313import { setFieldsNoTypeCheck } from "util/objectUtils" ;
14+ import Skeleton from "antd/es/skeleton" ;
15+ import { ReactNode , useContext , useMemo } from "react" ;
16+ import { CompContext } from "../utils/compContext" ;
17+ import LoadingOutlined from "@ant-design/icons/LoadingOutlined" ;
18+ import { ThemeContext } from "../utils/themeContext" ;
1419
1520const Wrapper = styled . div `
1621 &,
@@ -23,6 +28,50 @@ const Wrapper = styled.div`
2328
2429const __WITH_IS_LOADING = "__WITH_IS_LOADING" ;
2530
31+ const LoadingWrapper = ( {
32+ isLoading,
33+ children,
34+ } :{
35+ isLoading :boolean ,
36+ children :ReactNode ,
37+ } ) => {
38+ const compState = useContext ( CompContext ) ;
39+ const currentTheme = useContext ( ThemeContext ) ?. theme ;
40+
41+ const showLoading = useMemo ( ( ) => {
42+ const themeDataIndicator = currentTheme ?. showDataLoadingIndicators ;
43+ const compDataIndicator = compState . comp ?. comp . showDataLoadingIndicators ;
44+
45+ return isLoading ?(
46+ compDataIndicator !== 'undefined' ?compDataIndicator :Boolean ( themeDataIndicator )
47+ ) :false ;
48+ } , [
49+ isLoading ,
50+ currentTheme ?. showDataLoadingIndicators ,
51+ compState . comp ?. comp . showDataLoadingIndicators ,
52+ ] ) ;
53+
54+ if ( currentTheme ?. dataLoadingIndicator === 'skeleton' ) {
55+ return (
56+ < Wrapper >
57+ < Skeleton active loading = { showLoading } >
58+ { children }
59+ </ Skeleton >
60+ </ Wrapper >
61+ ) ;
62+ }
63+
64+ return (
65+ < Wrapper >
66+ < Spin
67+ spinning = { showLoading }
68+ indicator = { < LoadingOutlined style = { { fontSize :15 } } spin /> }
69+ >
70+ { children }
71+ </ Spin >
72+ </ Wrapper >
73+ )
74+ }
2675/**
2776 * Unified increase isLoading effect
2877 */
@@ -38,16 +87,16 @@ export function withIsLoading<T extends MultiCompConstructor>(VariantComp: T): T
3887} ,
3988updateNodeFields :( value :any ) => {
4089const fetchInfo = value [ __WITH_IS_LOADING ] as FetchInfo ;
41- return { isLoading :fetchInfo . isFetching } ;
90+ return { isLoading :fetchInfo ? .isFetching } ;
4291} ,
4392} ) ;
4493}
4594
4695override getView ( ) {
4796return (
48- < Wrapper >
49- < Spin spinning = { this . isLoading } > { super . getView ( ) } </ Spin >
50- </ Wrapper >
97+ < LoadingWrapper isLoading = { this . isLoading } >
98+ { super . getView ( ) }
99+ </ LoadingWrapper >
51100) ;
52101}
53102}