How to add Ajax progress bar to React.js application?

Question

I have a submitForm(); function to send an Ajax request and return data. How can I show a progress bar in my program.

I am using jQuery to send Ajax.

Answer 1

Without mentioning third party libraries (there are plenty out there that have API's for you to call to do it for you)

The most naive way is to dispatch something like a isLoading Action, the same time you fire off your API call. Then have the components you want subscribe to that part of the store, and display a whatever you please. So you can have render() code that looks like

if(this.props.isLoading){
    return <span> Loading... </span> //or whatever progress bar you want
}
else{
    //your code
}

And then when your API responds, you just set isLoading back to false, and then your components can use the responses.