I have some code which displays an Activity Indicator for sometime, and then renders an expensive Component.
Here is the code for it
class MyComponent extends React.Component{
constructor(){
this.state={isLoading:true,...someOtherStateProps}
}
componentDidMount(){
InteractionManager.runAfterInteractions(()=>{
/* Expensive Calculations*/
this.setState(ps=>({isLoading:false}))
})
}
render(){
if(this.state.isLoading)
return <ActivityIndicator/>
return <ComponentThatRendersALongListOfItems/>
}
}
My Problem with this code is, if there is an ActivityIndicator present it takes a hell lot of time to actually render the Main View even after I set state of isLoading to false. If I replace that Activity Indicator with a return value of null or Loading..., I see my main Component with a very short delay. I placed 2 console logs in the render method to confirm if the return value was from the if part or the main part. I think even after ActivityIndicator is unmounted it still keeps animating which blocks the main thread from rendering the Main component. Any help or advice?
I have some code which displays an Activity Indicator for sometime, and then renders an expensive Component.
Here is the code for it
My Problem with this code is, if there is an ActivityIndicator present it takes a hell lot of time to actually render the Main View even after I set state of isLoading to false. If I replace that Activity Indicator with a return value of null or Loading..., I see my main Component with a very short delay. I placed 2 console logs in the render method to confirm if the return value was from the if part or the main part. I think even after ActivityIndicator is unmounted it still keeps animating which blocks the main thread from rendering the Main component. Any help or advice?