Implementing Multiple Spinners

In single-page applications, the better UX practice is usually not to block the entire UI with one loading indicator but to show multiple localized indicators depending on different pending network requests. An example could be two independent loading indicators for movie details and reviews.

A simple solution to this problem would be adding a label property to our API action payload and having the API middleware pass it to apiStart() and apiFinish() actions:

const fetchMovie = (movieId) => ({
  type: API,
  payload: {
    url: `/movie/${movieId}`,
    onSuccess: setMovie,
    label: 'movie'
  }
});

const fetchComments = (movieId) => ({
  type: API,
  payload: {
    url: `/movie/${movieId}`,
    onSuccess: setReviews,
    label: 'reviews'
  }
});

The following code signals the spinner to stop running when a fetch request is made:

dispatch(apiStart(label));

axios.request({ url, method })
  .then(({ data }) => {
    // handle response
    dispatch(apiFinish(label));
  })
  .catch(error => {
    // handle errors
    dispatch(apiFinish(label));
  });