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

Question

在分析应用程序中，我有一个加载图标（实际上是模式叠加层），它已作为呈现元素的第一项添加到DOM中（涵盖了其他所有内容）。

与此相关的问题是，这也是未渲染的第一件事，这意味着当实际的应用程序加载时，它会首先删除加载模式，而当用户看到尚未完全加载的内容时，只需一秒钟的时间更新页面。仅在这几分之一秒（可能约为400毫秒）之后，他才能获得页面的最终状态。

是否存在某种干净的方法来设置此“ pageLoading”的状态，以便仅在呈现所有其他内容后将其删除？还是应该以其他方式处理加载图标/模式？

一个小的伪反应样本（不是巨大的实际应用程序）：

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>
  )
}