react loading

import axios from 'axios';
import React from "react";
import "./style.scss"
class Loading {
    constructor() {
        this.loadingTag = 0;
        this.subscriptions = [];
    }
    add() {
        this.loadingTag++;
        this.subscriptions.forEach(f => f(this.loadingTag));
    }
    sub() {
        this.loadingTag--;
        this.subscriptions.forEach(f => f(this.loadingTag));
    }
    get() {
        return this.loadingTag;
    }
    subscribe(f) {
        this.subscriptions.push(f);
    }
}
let loadingPublisher = new Loading();

axios.interceptors.request.use(function (config) {
    if (config && !config.ignoreLoading) {
        loadingPublisher.add();
    }
    return config;
}, function (error) {
    return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
    if (response && response.config && !response.config.ignoreLoading) {
        loadingPublisher.sub();
        return response;
    } else {
        return response;
    }
}, function (error) {
    return Promise.reject(error);
});

export default class YMLoading extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            globalLoading: false
        };
    }

    componentDidMount() {
        loadingPublisher.subscribe((loadingTag) => {
            if (this.state.globalLoading !== !!loadingTag) {
                this.setState({ globalLoading: !!loadingTag });
            }
        });
    }
    render() {
        const a = this.state.globalLoading ? <div className="loading">
            <div><div className="loading-dots loading-dots-container" aria-label="Loading, please wait...">
                <span></span>
                <span></span>
                <span></span>
            </div></div>
        </div> : "";
        return <>
            {a}
        </>;
    }
}