title: Loading screen during render (asynchronous rendering)
body: <p>I have one complex component, that is rendering a few seconds. This component contains large canvas with a lot of items. Is there any way how to render some icon during waiting on this <code>Print</code> component?</p>
  
  <pre class="lang-js prettyprint-override"><code>render(){
    const {data} = this.props;
    return(
      &lt;Page&gt;
        &lt;div className="item column-3" id="graphColumn"&gt;
          {this.state.loading ? &lt;img src={loadingIcon}/&gt; : false}
          &lt;div className={this.state.loading ? "hidden" : "visible"}&gt;
            &lt;Print channels={this.state.channels} readyToRender={this.readyRender.bind(this)}/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Page&gt;
    )
  }
  readyRender(){
    this.setState({
      loading: false
    })
  }
  </code></pre>
  
  <p>I tried to set <code>display:none</code> during rendering, and after  in <code>componentDidMount</code> in <code>Print</code> component set <code>display:auto</code>, but this doesn't work.It take long time too. Any tips for solution?</p>