52 lines
2.0 KiB
JavaScript
52 lines
2.0 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
const loader = document.getElementById("loader-overlay"); // déjà présent dans le layout.ejs
|
|
const errorMessage = document.getElementById("error-message");
|
|
|
|
let activateTimeout = null;
|
|
let timeoutError = null;
|
|
|
|
// Le loader est le premier élément dans le HTML, donc il est chargé en premier
|
|
// Il est prêt à s'afficher immédiatement dès que showLoader() est appelé
|
|
// Pas de classe "hidden" par défaut = il est dans le DOM et prêt instantanément
|
|
|
|
//activer le loader et le montrer a l'écran
|
|
window.showLoader = function() {
|
|
clearTimeout(activateTimeout);
|
|
clearTimeout(timeoutError);
|
|
errorMessage.style.display = "none";
|
|
loader.classList.remove("hidden");
|
|
|
|
// Délai avant l'affichage : permet d'éviter le flash du loader sur les chargements rapides
|
|
// Si hideLoader() est appelé avant ce délai, l'utilisateur ne verra jamais le loader
|
|
activateTimeout = setTimeout(() => {
|
|
// Vérifier qu'on est toujours pas caché (au cas où hideLoader() ait été appelé entre temps)
|
|
if (!loader.classList.contains("hidden")) {
|
|
loader.classList.add("active");
|
|
}
|
|
}, 500);
|
|
|
|
// Afficher un message d'erreur après 5 secondes si le loader est toujours actif
|
|
timeoutError = setTimeout(() => {
|
|
if (loader.classList.contains("active") && !loader.classList.contains("hidden")) {
|
|
showError("Connexion lente ou problème de réseau. Veuillez vérifier votre connexion.");
|
|
}
|
|
}, 5000);
|
|
};
|
|
|
|
//enlever le loader et le faire disparaitre
|
|
window.hideLoader = function() {
|
|
clearTimeout(activateTimeout);
|
|
clearTimeout(timeoutError);
|
|
loader.classList.remove("active");
|
|
setTimeout(() => loader.classList.add("hidden"), 500);
|
|
};
|
|
|
|
//cas d'erreur
|
|
window.showError = function(msg) {
|
|
clearTimeout(activateTimeout);
|
|
clearTimeout(timeoutError);
|
|
errorMessage.textContent = msg;
|
|
errorMessage.style.display = "block";
|
|
};
|
|
});
|