title: Reactjs - render child asynchronous
body: <p>I am showing loading gif, until canvas is fully rendered, i make then callback to set visible of loading gif to off. But all time during rendering, gif rotating is stopped and other parts of page doesn't react too. So is there any way ho to render any component asynchronous to prevent influencing with other parts of page?</p>
  
  <pre><code>class GraphPage extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              loaded: false,
              print: null,
              loading: true
          }
      }
  
      componentDidMount(){
          this.setReady();
      }
  
      render(){
          const graphList = graphStore.getGraphValue();
          var {data} = this.props;
          return(
              &lt;div&gt;
                  &lt;div className="inputs"&gt;
                      &lt;Inputs modal={false} unit='%' list={graphList.rotation} descTitle={data.graph.machine}/&gt;
                      &lt;Inputs modal={false} unit='mm' list={graphList.machine} descTitle={data.graph.rotation}/&gt;
                  &lt;/div&gt;
                  &lt;div className="graph"&gt;
                      {this.state.loading? &lt;img src={loadingIcon}/&gt; : false}
                      {this.state.print? &lt;Print readyToRender={this.update.bind(this)}/&gt; : false}
                  &lt;/div&gt;
  
              &lt;/div&gt;
          )
      }
  
      update(){
          this.setState({
              loading: false
          })
      }
  
      setReady(){
          setTimeout(function() {
              this.setState({print: new Print()})
          }.bind(this), 1000);
  
      }
  }
  </code></pre>