title: Show loading spinner before axios fetches data using .get
body: <p>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. </p>
  
  <p>Here is the first way which works:</p>
  
  <pre><code>axios.interceptors.request.use((config) =&gt; {
      console.log('Start Ajax Call');
      FreezeUI();
      return config;
  }, (error) =&gt; {
  
      console.log(error);
      return Promise.reject(error);
  });
  
  axios.interceptors.response.use((response) =&gt; {
      console.log('Done with Ajax call');
      document.querySelector('.test').insertAdjacentHTML('afterbegin', response.data.html);
      UnFreezeUI();
      return response;
  
  }, (error) =&gt; {
      return Promise.reject(error);
  });
  
  axios.get('/account/active-listings')
  .then(response =&gt; {
      // Do I need this?
  })
  .catch(err =&gt; console.log(err));
  </code></pre>
  
  <p>And the second way that also works. But, it doesn't seem like I actually need that .then() and .catch() block at all?</p>
  
  <pre><code>axios.interceptors.request.use((config) =&gt; {
      console.log('Start Ajax Call');
      FreezeUI();
      return config;
  }, (error) =&gt; {
  
      console.log(error);
      return Promise.reject(error);
  });
  
  axios.interceptors.response.use((response) =&gt; {
      console.log('Done with Ajax call');
      return response;
  
  }, (error) =&gt; {
      return Promise.reject(error);
  });
  
  axios.get('/account/active-listings')
  .then(response =&gt; {
      document.querySelector('.test').insertAdjacentHTML('afterbegin', response.data.html);
      UnFreezeUI();
  })
  .catch(err =&gt; console.log(err));
  </code></pre>