Ant design pro react一个页面包含许多图表，如何在打开该页面的时候等图表全部加载完毕再显示页面？

Question

类似这种图表监控页面，目前我做了一个页面，文件名为analysis.tsx,使用的是react函数组件。但是当前所有的数据请求和图表渲染全部在这个analysis.tsx中，数据请求全部写在useEffect中，并且我没有将各个图表抽离成组件，图表的渲染全部放到return（）中了

现在的问题是，我一打开这个页面，图表的加载都不一致，有的加载完了有的还在加载中。

我想要的结果：打开这个页面出现“正在加载”一类的标志，或者就像Ant design pro的首页一样，在加载的过程中显示骨架屏那样的效果

请问要达到这种效果，应该怎么做呢，我必须要把每个图表都抽离成组件吗，然后引入到这个analysis.tsx中？

Answer 1

this.setState({loading: true});

promise.all([fetchChat1,fetchChat2]).then(() => {
    this.setState({loading: false});
})

<div>
    <骨架 loading={loading}><Chart1 /></骨架>
    <骨架 loading={loading}><Chart2/></骨架>
</div>