I'm setting up an application for submitting a form using react/redux as a frontend and django as a backend. The problem is the submission needs some time to be processed so I need to set a waiting loader alert before alerting the submission success. Any suggestions?

Here's my post action:

export const addCandidate = candidate => (dispatch, getState) => {

axios
    .post("http://localhost:8000/api/candidates/", candidate, tokenConfig(getState))
    .then(res => {
      dispatch(createMessage({ addCandidate: "Formulaire envoyé" }));
      swal("", "Votre candidature a été enregistrée avec succès", "success");
      dispatch({
        type: ADD_CANDIDATE,
        payload: res.data 
      });
    })
    .catch(err =>
      dispatch(returnErrors(err.response.data, err.response.status))
    );
};

1 Answers

1
Mikail Bayram On

You can add a state parameter named loading which will initally have a value false, and before you fire your request set its value to true, and when the request is resolved set back to false

this.setState({loading:true});
axios.post().then(res=>{
// your code
this.setState(false);
})

And in your components render

{this.state.loading && <Spinner />}