前端 Ant Design Pro 加loading

1.首先给模块加一层<Spin></Spin>

return (
        <Spin spinning={loading} wrapperClassName={styles.mySpinning}>
            <div className={styles.main}>
                <TitleBar {...params} />
                <div id='carbonPeak' className={styles.echarts} />
            </div>
        </Spin>
    
    )

 spinning的属性为true会一直显示加载，把加载样式调整好！！！

.mySpinning的样式举例

.mySpinning{
    height: 100%;
    :global{
        .ant-spin-spinning{
        max-height: 100% !important;
        }
        .ant-spin-container{
        height: 100%;
        }
    }
}

 2.让页面中的loading和model建立链接

export default connect(
    ({ loading, }) => 
    ({ loading: loading.effects['carbonPeak'], }),
)(index);

  页面中获取到loading

const { loading } = props.carbonPeak;

3.在当前页面加载时,useEffect()调用carbonPeak/changeLoading，就去访问carbonPeak中的loading，给其赋值为true，待其其他访问的数据成功时，更改carbonPeak的loading为false;

useEffect(() => {
        
        if (uniqueCode && tabActive != null && tabActive != undefined
            && projectTime.actualStartTime && projectTime.actualEndTime
            && listSences.length > 0
        ) {
            const params = {
                uniqueCode: uniqueCode,
                actualStartTime: projectTime.actualStartTime,
                actualEndTime: projectTime.actualEndTime,
                listSences: listSences
            };

            // 数据加载
            dispatch({
                type: 'carbonPeak/changeLoading',
            });

                
            if (tabActive == 0) {
                dispatch({
                    type: 'carbonPeak/carbonPeakModel',
                    payload: { ...params }
                });
            } else {
                dispatch({
                    type: 'carbonPeak/energyPeakModel',
                    payload: { ...params }
                });
            }

        }


    }, [
        tabActive,
        uniqueCode,
        projectTime,
        // projectTime.actualEndTime,
        listSences
    ]);

在model中

    namespace: 'carbonPeak',  //命名空间

    state: {
        largeYear: [],
        largeYear2:[],
        sceneNamePeak: [],
        allScensesPeak: [],
        gdpUnitAndPopUnit:[],
        loading:true   
    },

effects:{ 
    *changeLoading({ payload, callback }, { call, put }) {
            yield put({
                type: 'saveLoading',
                payload: {loading:true},
                });
     }
}

reducers: {
    saveLoading(state, { payload }) {
            return {
                ...state,
                loading:payload.loading
            }
    }
}

当数据加载成功时，调用saveloading，修改loading的值

 effects: {
    *energyPeakModel({ payload, callback }, { call, put }) {
            
            ......// 省略

            yield put({
                type: 'saveLoading',
                payload: {loading:false},
            });
            // if (callback) callback(all);
     },


     *carbonPeakModel({ payload, callback }, { call, put }) {
           
            ......// 省略

            yield put({
                type: 'saveLoading',
                payload: {loading:false},
            });
            // if (callback) callback(all);
     },
}