maintaining couple actions in react - loading screen - reactjs

Question

In my app component I am fetching couple things so there's couple actions. It's a state component. When one of the actions ends isLoading property changes to false and screen loading disappears. But it doesn't work properly because one action can take longer than another. How Can I change my isLoading property to false after all async actions are done?
My code looks something like
componentDidMount() {
this.props.fetchA();
this.props.fetchB();
this.props.fetchC().then(() => {
this.setState({isLoading: false})
})
}

Answer 1

You can chain those promises like this
componentDidMount() {
this.setState({ isLoading: true}); // start your loader
this.props.fetchA()
.then(() => {
return this.props.fetchB();
})
.then(() => {
return this.props.fetchC()
})
.then(() => {
this.setState({ isLoading: false }); // Once done, set loader to false
})
.catch(error => {
console.log('Oh no, something went wrong', error);
});
}
or using async/await with try catch do something fancy like this.
constructor () {
super();
this.state = {
isLoading: false,
};
this.onLoadData = this.onLoadData.bind(this); // see what I did here, i binded it with "this"
}
componentDidMount() {
this.onLoadData(); // Call you async method here
}
async onLoadData () {
this.setState({ isLoading: true}); // start your loader
try {
const awaitA = await this.props.fetchA();
const awaitB = await this.props.fetchB();
const awaitC = await this.props.fetchC();
this.setState({ isLoading: false }); // Once done, set loader to false
} catch (e) {
console.log('Oh no, something went wrong', error);
}
}