Show loading spinner before axios fetches data using .get

Question

When a user lands on their dashboard I want to load some widgets and I will be doing it via axios. I want to show a loading spinner while the data is being fetched. After some digging it seems like the way to do this is by using axios interceptors. (I think) It looks like I have it working but I don't know where I should be handling the response as doing it both ways works.

Here is the first way which works:

axios.interceptors.request.use((config) => {
    console.log('Start Ajax Call');
    FreezeUI();
    return config;
}, (error) => {

    console.log(error);
    return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
    console.log('Done with Ajax call');
    document.querySelector('.test').insertAdjacentHTML('afterbegin', response.data.html);
    UnFreezeUI();
    return response;

}, (error) => {
    return Promise.reject(error);
});

axios.get('/account/active-listings')
.then(response => {
    // Do I need this?
})
.catch(err => console.log(err));

And the second way that also works. But, it doesn't seem like I actually need that .then() and .catch() block at all?

axios.interceptors.request.use((config) => {
    console.log('Start Ajax Call');
    FreezeUI();
    return config;
}, (error) => {

    console.log(error);
    return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
    console.log('Done with Ajax call');
    return response;

}, (error) => {
    return Promise.reject(error);
});

axios.get('/account/active-listings')
.then(response => {
    document.querySelector('.test').insertAdjacentHTML('afterbegin', response.data.html);
    UnFreezeUI();
})
.catch(err => console.log(err));

Answer 1

I'm not sure if I got it right, but what I think you are looking for is the onDownloadProgress option which you can add in your request config. it is a function which you can implement which receives a progressEvent. In that function you could set the spinner.

Take a look at the request config part on their github page

small example for clarity:

axios.get('/account/active-listings', {
    onDownloadProgress: (pe) => document.querySelector('.place-to-insert-spinner').insertAdjacentHTML(loading spinner thingie)
})

EDIT: You probably should remove the spinner when your request is finished too.