Implementing Multiple Spinners
Learn how to implement 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));
});
Get hands-on with 1200+ tech skills courses.