Reactjs - render child asynchronous - asynchronous

Question

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?
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(
<div>
<div className="inputs">
<Inputs modal={false} unit='%' list={graphList.rotation} descTitle={data.graph.machine}/>
<Inputs modal={false} unit='mm' list={graphList.machine} descTitle={data.graph.rotation}/>
</div>
<div className="graph">
{this.state.loading? <img src={loadingIcon}/> : false}
{this.state.print? <Print readyToRender={this.update.bind(this)}/> : false}
</div>
</div>
)
}
update(){
this.setState({
loading: false
})
}
setReady(){
setTimeout(function() {
this.setState({print: new Print()})
}.bind(this), 1000);
}
}

Answer 1

I would put the rotating gif in the renderer of Print.
class Print extends React.Component {
constructor(props) {
super(props);
this.state = {
renderFinished: true
}
this.calculate().then(function() {
/* Canvas done => display it! */
this.setState({ renderFinished: true })
}.bind(this))
calculate() {
var result = new Promise();
// Something asyncronous, just an example
setTimeout(function(){
while(doCalc) {
if(calcIsDone) {
// Ready for render
result.resolve(theResult);
}
}
}.bind(this), 0);
return result;
}
render() {
return {
renderFinished ?
<div>
{ /* Here goes the rendered canvas output */ }
</div>
:
<img src={loadingIcon}/>
}
};
}
And then GraphPage looks like this
class GraphPage extends React.Component {
constructor(props) {
super(props);
}
render(){
// It look like graphStore is globally available so Print also can access it directly
const graphList = graphStore.getGraphValue();
var {data} = this.props;
return(
<div>
<div className="inputs">
<Inputs modal={false} unit='%' list={graphList.rotation} descTitle={data.graph.machine}/>
<Inputs modal={false} unit='mm' list={graphList.machine} descTitle={data.graph.rotation}/>
</div>
<div className="graph">
{ /* Maybe graphStore should be given here as a prop? */ }
<Print/>
</div>
</div>
)
}
}