class Loader {
$loader = null;
data = {
visible: false,
};
constructor({ $target, data, setLoading }) {
this.$loader = document.createElement('section');
$target.appendChild(this.$loader);
this.data = data;
this.setLoading = setLoading;
this.render();
this.$loader.onclick = () => this.toggleLoader(false);
console.log('[CREATED]', 'LOADER', this.isLoading);
}
setState(nextData) {
this.data = nextData;
this.render();
console.log('[UPDATE]', 'Loading', nextData);
}
toggleLoader(visible) {
this.setState({ visible });
}
render() {
const { visible } = this.data;
if (visible) {
this.$loader.innerHTML = `
<div class="loader-wrapper">
<div class="loader"></div>
</div>
`;
} else {
this.$loader.innerHTML = '';
}
}
}