Javascript 在渲染所有组件后删除加载图标

在一个分析应用程序中，我有一个加载图标（实际上是模态叠加），它作为渲染元素的第一项（包括所有其他内容）添加到DOM中

问题是，这也是第一件没有呈现的事情，这意味着当实际应用加载时，它会首先删除加载模式，当用户看到尚未完全更新的页面时，会有几分之一秒的时间。只有在这几分之一秒（大约400毫秒）之后，他才能获得页面的最终状态

是否有一些干净的方法来设置这个“页面加载”的状态，使其仅在呈现所有其他内容后才被删除？或者我应该以不同的方式处理加载图标/模式吗

一个小的伪react示例（不是实际的应用程序，因为它很大）：

this.state={
页面加载：false，
数据：空，
}
ComponentDidMount（）{
这是我的国家({
页面加载：对，
}, () => {
data=getData（）；
这是我的国家({
数据：数据，
页面加载：false，
})})
}
render（）{
让组件=[]
if（this.state.pageLoading）{
组件。推送（加载）
}
components.push（）
返回(
组件
)
}

无法在没有看到代码的情况下给出特定的建议，但是您是否尝试过在主应用程序挂载时清除加载状态？div中的组件应该在

{}

中，因为这是Javascript的一部分，您应该使用循环，因为

组件是一个数组。无法在没有看到代码的情况下给出特定的建议，但是您是否尝试过在主应用程序挂载时清除加载状态？div中的组件应该在
{}
中，因为这是Javascript的一部分，您应该使用循环作为
组件
是一个数组。
this.state = {
  pageLoading: false,
  data: null,
}

ComponentDidMount() {
  this.setState({
    pageLoading: true,
  }, () => {
  data = getData();
  this.setState({
    data: data,
    pageLoading: false,
  })})
}

render() {
  let components = []
  if (this.state.pageLoading) {
    components.push(<div>LOADING</div>)
  }
  components.push(<Dashboard data='data'/>)
  return(
    <div>
      components
    </div>
  )
}