The "suspension of the request" technique with Axios

Use the "suspension of the request" technique to increase your loading time in a fronted local project by some codes into the axios interceptor:

There is a great way to enhance the loading time in your local project with customizable time, which is better than the network tab (in developer tools)!

When you are working on a local full-stack project, you may notice that the loading time is so fast that you cannot see the loading component UI. Alternatively, your network loading time may be fast, and you cannot see the skeleton component when you finished a section or a page .

• The advantage of this technique is that it eliminates the need to set specific loading times for each API call in your component every time. Instead, you can set a global configuration with your interceptor.
• If you are working on a local full-stack project or your local website loads quickly  , this technique can be used.
• You no longer need to manually change the loading state to view the final outcome.
• This technique differs from the network tab and is superior to it in terms of observing the loading component, as you can specify custom seconds and milliseconds.

It's pretty interesting, isn't it ?!

Therefore, add the bottom script to your axios interceptor:

--------------------------------


function reaquestSuspender (time = 2000) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    , time);
  });
}


--------------------------------


import axios from "axios";

const _axios = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// Add a request suspender to interceptor
_axios.interceptors.request.use(async function (config) {
    await requestSuspender(2500);

    return config;
  }, function (error) {
    return Promise.reject(error);
  });

export default _axios;