Afficher la filante de chargement avec axios et réagir (réchauffé possible)

Mon objectif est d'afficher une fileuse de chargement lorsqu'une demande HTTP est appelée. Je veux faire cela globalement, cela signifie que lorsque n'importe quel composant appelle une API, est automatique pour montrer à TeH Spinner, de préférence, sans code additionnel pour contrôler la spinner.

J'utilise React et Axios. Je sais sur les intercepteurs d'Axios. P>

Ma structure réelle: P>

import axios from "axios";

const serviceBase = () => {

    const api = axios.create({
        baseURL: 'https://xxxxx.xxxxx.com/xxxxxx/'
    });

    api.interceptors.request.use(async (config) => {
        try{
            // In this moment, show the spinner
            // showLoading();
        }
        catch(e)
        {
            alert('Error request' + e);
        }

        return config;
    });

    api.interceptors.response.use(async (config) => {
        try {
            // In this moment, hide the spinner
            // hideLoading();
        }
        catch(e)
        {
            alert('Error response' + e);   
        }

        return config;
    });

    return api;
};

export default serviceBase;