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}
</>;
}
}
|