如何在等待短暂间隔后显示React加载指示器？

Question

所以我有一个微调器在数据加载时显示 - 代码如下所示：

<Spinner show={this.props.ajaxCallsInProgress > 0} />

然而，这些AJAX调用中的一些调用如此快速地完成，微调器瞬间消失并且看起来很糟糕。无论如何在显示微调器之前添加延迟（例如200ms），所以如果调用在此时间之前完成，则不显示微调器？那会是什么样的？

Answer 1

你可以在那里做一点点破解。保持组件状态，如果计时器结束或不是这样的话，则跟踪：

componentWillReceiveProps(newProps){
    if(newProps.ajaxCallsInProgress > 0 && !this.state.timerOver){
         setTimeout(() => { this.setState({timerOver: true});}, 200)
    }
    else if(newProps.ajaxCallsInProgress <= 0){
         this.setState({timerOver: false});
    }
}

render(){
    return(
      <Spinner show={this.props.ajaxCallsInProgress > 0 && this.state.timerOver} />
    )
}