Amélioration du loader : timeout 5s, intégration automatique, correction username

- Ajout d'un timeout de 5 secondes avec message d'erreur pour mauvaise connexion
- Intégration automatique du loader dans fetchWithJson()
- Ajout du loader sur tous les appels fetch manuels (index, historiqueParcours, client-form, intermediaire-form, nav-parcours)
- Correction du problème d'affichage username sur index.js (gestion erreurs et vérification éléments HTML)
- Loader premier élément dans layout.ejs pour chargement immédiat
- Délai de 500ms avant affichage pour éviter flash sur chargements rapides
- Gestion d'erreurs améliorée dans nav-parcours.js

etv2/public/js/auth.js

@@ -25,6 +25,7 @@ document.addEventListener('DOMContentLoaded', function () {
     // Récupération des informations du parcours
     (async () => {
       try {
+        // Le loader est déjà géré dans fetchWithJson
         const data = await fetchWithJson(`/auth/verifyMatricule/${matricule}`, 'GET');
 
         if (data.valid) {

etv2/public/js/client-form.js

@@ -141,48 +141,67 @@
   async function handleModalExtract() {
     document.getElementById('modalExtraireClient').disabled = true;
     
-    const response = await fetch(`/client/extract`, {
+    if (typeof window.showLoader === 'function') {
-      method: 'POST',
+      window.showLoader();
-      body: JSON.stringify({
+    }
-        "matricule": matricule,
+    
-        "numClient": document.getElementById("modalNumClient").value
+    try {
-      }),
+      const response = await fetch(`/client/extract`, {
-      headers: {
+        method: 'POST',
-        'Content-Type': 'application/json',
+        body: JSON.stringify({
-      },
+          "matricule": matricule,
-    });
+          "numClient": document.getElementById("modalNumClient").value
-    const res = await response.json();
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      const res = await response.json();
 
-    if (res.valid) {
+      if (res.valid) {
-      document.getElementById("error-extract").style.display = "none";
+        document.getElementById("error-extract").style.display = "none";
+        document.getElementById('modalExtraireClient').disabled = false;
+        console.log(res);
+
+        // Save sessionStorage for Intermediaire
+        sessionStorage.setItem('tmp', JSON.stringify(res.data));
+
+        // Populate data
+        document.getElementById("numClient").value = (res.data.numClient) ? res.data.numClient : null;
+        document.getElementById("nomClient").value = (res.data.nomClient) ? res.data.nomClient : null;
+        document.getElementById("adresseClient").value = (res.data.adresseClient) ? res.data.adresseClient : null;
+        document.getElementById("codePostalClient").value = (res.data.postalClient) ? res.data.postalClient : null;
+        document.getElementById("villeClient").value = (res.data.villeClient) ? res.data.villeClient : null;
+        
+        validateField('numClient', true);
+        validateField('nomClient', true);
+        validateField('adresseClient', true);
+        validateField('codePostalClient', true);
+        validateField('villeClient', true);
+        updateSubmitButtonState('clientForm');
+
+        // close le modal
+        const elem = document.getElementById('modalExtractAxAPAC');
+        const instance = M.Modal.getInstance(elem);
+        instance.close();
+      } else {
+        document.getElementById("error-extract").style.display = "block";
+        document.getElementById('modalExtraireClient').disabled = false;
+        console.log("Problème rencontré lors de l'extraction cl063 AxA PAC :", res.error);
+        if (typeof window.showError === 'function') {
+          window.showError("Erreur lors de l'extraction des données client.");
+        }
+      }
+    } catch (error) {
+      console.error("Erreur lors de l'extraction client:", error);
+      if (typeof window.showError === 'function') {
+        window.showError("Erreur lors de l'extraction. Vérifiez votre connexion.");
+      }
+    } finally {
       document.getElementById('modalExtraireClient').disabled = false;
-      console.log(res);
+      if (typeof window.hideLoader === 'function') {
-
+        window.hideLoader();
-      // Save sessionStorage for Intermediaire
+      }
-      sessionStorage.setItem('tmp', JSON.stringify(res.data));
-
-      // Populate data
-      document.getElementById("numClient").value = (res.data.numClient) ? res.data.numClient : null;
-      document.getElementById("nomClient").value = (res.data.nomClient) ? res.data.nomClient : null;
-      document.getElementById("adresseClient").value = (res.data.adresseClient) ? res.data.adresseClient : null;
-      document.getElementById("codePostalClient").value = (res.data.postalClient) ? res.data.postalClient : null;
-      document.getElementById("villeClient").value = (res.data.villeClient) ? res.data.villeClient : null;
-      
-      validateField('numClient', true);
-      validateField('nomClient', true);
-      validateField('adresseClient', true);
-      validateField('codePostalClient', true);
-      validateField('villeClient', true);
-      updateSubmitButtonState('clientForm');
-
-      // close le modal
-      const elem = document.getElementById('modalExtractAxAPAC');
-      const instance = M.Modal.getInstance(elem);
-      instance.close();
-    } else {
-      document.getElementById("error-extract").style.display = "block";
-      document.getElementById('modalExtraireClient').disabled = false;
-      console.log("Problème rencontré lors de l'extraction cl063 AxA PAC :", res.error);
     }
   }
 
@@ -190,86 +209,123 @@
   async function handleSubmitForm(event) {
     event.preventDefault();
 
-    let idClient = client?.id;
+    if (typeof window.showLoader === 'function') {
-    const numClient = document.getElementById('numClient').value;
+      window.showLoader();
-
-    let responseClient;
-
-    if (numClient) {
-      responseClient = await fetch(`/client/read/${numClient}`, {
-        method: 'GET',
-        headers: { 'Content-Type': 'application/json' },
-      });
     }
-    const dataClient = await responseClient.json();
 
-    if (dataClient.valid) {
+    try {
-      idClient = dataClient.idClient;
+      let idClient = client?.id;
-    } else {
+      const numClient = document.getElementById('numClient').value;
-      // Créez le client ici si non trouvé
-      const responseCreateClient = await fetch(`/client/create`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-      });
-      const dataCreateClient = await responseCreateClient.json();
 
-      if (dataCreateClient.valid) {
+      let responseClient;
-        idClient = dataCreateClient.client.id;
+
+      if (numClient) {
+        responseClient = await fetch(`/client/read/${numClient}`, {
+          method: 'GET',
+          headers: { 'Content-Type': 'application/json' },
+        });
       }
-    }
+      const dataClient = await responseClient.json();
 
-    // Mettre à jour le contrat avec l'ID du client
+      if (dataClient.valid) {
-    if (idClient) {
+        idClient = dataClient.idClient;
-      const response = await fetch(`/client/update/${idClient}`, {
+      } else {
-        method: 'POST',
+        // Créez le client ici si non trouvé
-        body: JSON.stringify({
+        const responseCreateClient = await fetch(`/client/create`, {
-          "nom": document.getElementById('nomClient').value.toUpperCase(),
-          "numClient": document.getElementById('numClient').value,
-          "adresse": document.getElementById('adresseClient').value.toUpperCase(),
-          "mail": document.getElementById('emailClient').value,
-          "codePostal": document.getElementById('codePostalClient').value,
-          "ville": document.getElementById('villeClient').value.toUpperCase(),
-          "noteFinanciere": document.getElementById('noteFinanciereClient').value
-        }),
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      });
-      const data = await response.json();
-
-      if (data.valid) {
-        const idContrat = contrat?.id;
-
-        fetch(`/contrat/update/client/${idContrat}/${idClient}`, {
           method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+        });
+        const dataCreateClient = await responseCreateClient.json();
+
+        if (dataCreateClient.valid) {
+          idClient = dataCreateClient.client.id;
+        }
+      }
+
+      // Mettre à jour le contrat avec l'ID du client
+      if (idClient) {
+        const response = await fetch(`/client/update/${idClient}`, {
+          method: 'POST',
+          body: JSON.stringify({
+            "nom": document.getElementById('nomClient').value.toUpperCase(),
+            "numClient": document.getElementById('numClient').value,
+            "adresse": document.getElementById('adresseClient').value.toUpperCase(),
+            "mail": document.getElementById('emailClient').value,
+            "codePostal": document.getElementById('codePostalClient').value,
+            "ville": document.getElementById('villeClient').value.toUpperCase(),
+            "noteFinanciere": document.getElementById('noteFinanciereClient').value
+          }),
           headers: {
             'Content-Type': 'application/json',
           },
-        })
-        .then(response => response.json())
-        .then(data => {
-          if (data.valid) {
-            // Update Session storage
-            const clientStorage = JSON.parse(sessionStorage.getItem('tmp'));
-
-            if (clientStorage) {
-              clientStorage.nomClient = document.getElementById('nomClient').value.toUpperCase();
-              clientStorage.numClient = document.getElementById('numClient').value;
-              clientStorage.adresseClient = document.getElementById('adresseClient').value.toUpperCase();
-              clientStorage.postalClient = document.getElementById('codePostalClient').value;
-              clientStorage.villeClient = document.getElementById('villeClient').value.toUpperCase();
-
-              sessionStorage.setItem('tmp', JSON.stringify(clientStorage))
-            }
-
-            // Redirect vers intermédiaire
-            window.location.href = `/navParcours?numParcours=${getNumParcoursFromURL()}&submenu=intermediaire`;
-          } else {
-            console.log('Echec lors de la mise à jour de la relation id contrat - id client :', data);
-          }
         });
+        const data = await response.json();
+
+        if (data.valid) {
+          const idContrat = contrat?.id;
+
+          fetch(`/contrat/update/client/${idContrat}/${idClient}`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          })
+          .then(response => response.json())
+          .then(data => {
+            if (data.valid) {
+              // Update Session storage
+              const clientStorage = JSON.parse(sessionStorage.getItem('tmp'));
+
+              if (clientStorage) {
+                clientStorage.nomClient = document.getElementById('nomClient').value.toUpperCase();
+                clientStorage.numClient = document.getElementById('numClient').value;
+                clientStorage.adresseClient = document.getElementById('adresseClient').value.toUpperCase();
+                clientStorage.postalClient = document.getElementById('codePostalClient').value;
+                clientStorage.villeClient = document.getElementById('villeClient').value.toUpperCase();
+
+                sessionStorage.setItem('tmp', JSON.stringify(clientStorage))
+              }
+
+              // Le loader sera masqué lors de la redirection
+              // Redirect vers intermédiaire
+              window.location.href = `/navParcours?numParcours=${getNumParcoursFromURL()}&submenu=intermediaire`;
+            } else {
+              console.log('Echec lors de la mise à jour de la relation id contrat - id client :', data);
+              if (typeof window.hideLoader === 'function') {
+                window.hideLoader();
+              }
+              if (typeof window.showError === 'function') {
+                window.showError("Erreur lors de la mise à jour du contrat.");
+              }
+            }
+          })
+          .catch(error => {
+            console.error("Erreur lors de la mise à jour du contrat:", error);
+            if (typeof window.hideLoader === 'function') {
+              window.hideLoader();
+            }
+            if (typeof window.showError === 'function') {
+              window.showError("Erreur lors de la mise à jour. Vérifiez votre connexion.");
+            }
+          });
+        } else {
+          if (typeof window.hideLoader === 'function') {
+            window.hideLoader();
+          }
+          if (typeof window.showError === 'function') {
+            window.showError("Erreur lors de la mise à jour du client.");
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Erreur lors de la soumission du formulaire client:", error);
+      if (typeof window.hideLoader === 'function') {
+        window.hideLoader();
+      }
+      if (typeof window.showError === 'function') {
+        window.showError("Erreur lors de la soumission. Vérifiez votre connexion.");
       }
     }
   }

etv2/public/js/global.js

@@ -108,16 +108,40 @@ function isNullOrUndefined(value) {
 
 // Fonction pour éviter la duplication du code fetch
 async function fetchWithJson(url, method, body = null) {
-  const options = {
+  // Activer le loader si disponible
-    method: method,
+  if (typeof window.showLoader === 'function') {
-    headers: { 'Content-Type': 'application/json' },
+    window.showLoader();
-  };
+  }
-  if (body) options.body = JSON.stringify(body);
 
-  const response = await fetch(url, options);
+  try {
-  if (!response.ok) throw new Error('Réseau ou erreur serveur');
+    const options = {
+      method: method,
+      headers: { 'Content-Type': 'application/json' },
+    };
+    if (body) options.body = JSON.stringify(body);
 
-  return await response.json();
+    const response = await fetch(url, options);
+    if (!response.ok) throw new Error('Réseau ou erreur serveur');
+
+    const result = await response.json();
+    
+    // Désactiver le loader si disponible
+    if (typeof window.hideLoader === 'function') {
+      window.hideLoader();
+    }
+    
+    return result;
+  } catch (error) {
+    // Désactiver le loader en cas d'erreur
+    if (typeof window.hideLoader === 'function') {
+      window.hideLoader();
+    }
+    // Afficher l'erreur si disponible
+    if (typeof window.showError === 'function') {
+      window.showError('Erreur lors de la communication avec le serveur. Vérifiez votre connexion.');
+    }
+    throw error;
+  }
 }
 
 // Fonction de load du parcours en session storage
@@ -134,6 +158,7 @@ async function loadParcours(numParcours) {
     }
   } catch (error) {
     console.error("Erreur lors de la récupération des informations parcours :", error);
+    // Le loader est déjà géré dans fetchWithJson
   }
 }
 
@@ -146,7 +171,7 @@ function toggler(btn, div) {
   }
 }
 
-// Fonction de load du parcours en session storage
+// Fonction de load du contrat en session storage
 async function loadContrat(idContrat) {
   try {
     const data = await fetchWithJson(`/contrat/read/id/${idContrat}`, 'GET');
@@ -159,5 +184,6 @@ async function loadContrat(idContrat) {
     }
   } catch (error) {
     console.error("Erreur lors de la récupération des informations contrat :", error);
+    // Le loader est déjà géré dans fetchWithJson
   }
 }

etv2/public/js/historiqueParcours.js

@@ -29,11 +29,22 @@ document.addEventListener("DOMContentLoaded", async function () {
   }
 
   try {
+    if (typeof window.showLoader === 'function') {
+      window.showLoader();
+    }
     const userResponse = await fetchUserDetails(matriculeUser);
     regionUser = userResponse?.user["@expand"].region?.nom || null;
+    if (typeof window.hideLoader === 'function') {
+      window.hideLoader();
+    }
   } catch (error) {
     displayError("Erreur lors de la récupération des données utilisateur.");
-
+    if (typeof window.hideLoader === 'function') {
+      window.hideLoader();
+    }
+    if (typeof window.showError === 'function') {
+      window.showError("Erreur lors de la récupération des données utilisateur.");
+    }
     return;
   }
 
@@ -50,6 +61,9 @@ document.addEventListener("DOMContentLoaded", async function () {
   
   // Fetch initial data
   try {
+    if (typeof window.showLoader === 'function') {
+      window.showLoader();
+    }
     const response = await fetch(`/historiqueParcours/${regionUser}`);
     const dataResponse = await response.json();
 
@@ -58,9 +72,21 @@ document.addEventListener("DOMContentLoaded", async function () {
       populateParcoursTable(tableData);
     } else {
       displayError("Erreur lors de la récupération des parcours");
+      if (typeof window.showError === 'function') {
+        window.showError("Erreur lors de la récupération des parcours");
+      }
+    }
+    if (typeof window.hideLoader === 'function') {
+      window.hideLoader();
     }
   } catch (error) {
     displayError("Failed to fetch data. Please try again later.");
+    if (typeof window.hideLoader === 'function') {
+      window.hideLoader();
+    }
+    if (typeof window.showError === 'function') {
+      window.showError("Erreur lors du chargement des données. Vérifiez votre connexion.");
+    }
   }
 
   // Add event listeners to checkboxes
@@ -70,6 +96,9 @@ document.addEventListener("DOMContentLoaded", async function () {
 
       if (checkbox.checked) {
         try {
+          if (typeof window.showLoader === 'function') {
+            window.showLoader();
+          }
           const response = await fetch(`/historiqueParcours/${region}`);
           const dataResponse = await response.json();
 
@@ -78,9 +107,21 @@ document.addEventListener("DOMContentLoaded", async function () {
             populateParcoursTable(tableData);
           } else {
             displayError("Erreur lors de la récupération des parcours");
+            if (typeof window.showError === 'function') {
+              window.showError("Erreur lors de la récupération des parcours");
+            }
+          }
+          if (typeof window.hideLoader === 'function') {
+            window.hideLoader();
           }
         } catch (error) {
           displayError("Failed to fetch data. Please try again later.");
+          if (typeof window.hideLoader === 'function') {
+            window.hideLoader();
+          }
+          if (typeof window.showError === 'function') {
+            window.showError("Erreur lors du chargement des données. Vérifiez votre connexion.");
+          }
         }
       } else {
         removeRegionFromTableData(region);
@@ -104,6 +145,7 @@ const removeRegionFromTableData = (region) => {
 
 async function fetchUserDetails(matriculeUser) {
   try {
+    // Le loader doit être géré par l'appelant si nécessaire
     const response = await fetch(`/user/read/matricule/${matriculeUser}`);
     const data = await response.json();
     
@@ -308,6 +350,9 @@ function downloadCSV(applyFilters) {
 
 async function generateProject(numParcours, produit) {
   try {
+    if (typeof window.showLoader === 'function') {
+      window.showLoader();
+    }
     const response = await fetch(`/generate/${produit}/projet/${numParcours}`, {
       method: "POST",
       headers: { "Content-Type": "application/json"},
@@ -328,8 +373,18 @@ async function generateProject(numParcours, produit) {
     a.click();
     window.URL.revokeObjectURL(url);
     a.remove();
+    
+    if (typeof window.hideLoader === 'function') {
+      window.hideLoader();
+    }
   } catch (error) {
     console.error("Erreur lors de la génération du projet:", error);
+    if (typeof window.hideLoader === 'function') {
+      window.hideLoader();
+    }
+    if (typeof window.showError === 'function') {
+      window.showError('Erreur lors de la génération du projet. Vérifiez votre connexion.');
+    }
   }
 }
 

etv2/public/js/index.js

@@ -4,14 +4,30 @@ document.addEventListener('DOMContentLoaded', function () {
   const token = localStorage.getItem('jwtToken');
 
   if (token) {
-    const decoded = jwt_decode(token);
+    try {
-    const userFirstName = decoded.userFirstName;
+      const decoded = jwt_decode(token);
-    const userLastName = decoded.userLastName;
+      const userFirstName = decoded?.userFirstName || '';
-    const userMatricule = decoded.userMatricule;
+      const userLastName = decoded?.userLastName || '';
+      const userMatricule = decoded?.userMatricule || '';
 
-    document.getElementById("firstNameItem").innerHTML = userFirstName;
+      // Vérifier que les éléments HTML existent avant de les modifier
-    document.getElementById("lastNameItem").innerHTML = userLastName;
+      const firstNameItem = document.getElementById("firstNameItem");
-    document.getElementById("userMatricule").innerHTML = userMatricule;
+      const lastNameItem = document.getElementById("lastNameItem");
+      const userMatriculeItem = document.getElementById("userMatricule");
+
+      if (firstNameItem) {
+        firstNameItem.innerHTML = userFirstName;
+      }
+      if (lastNameItem) {
+        lastNameItem.innerHTML = userLastName;
+      }
+      if (userMatriculeItem) {
+        userMatriculeItem.innerHTML = userMatricule;
+      }
+    } catch (error) {
+      console.error("Erreur lors du décodage du token:", error);
+      // En cas d'erreur, ne pas afficher les informations utilisateur
+    }
   }
 
   /* ----------  EVENNEMENT  ------------ */
@@ -30,10 +46,14 @@ document.addEventListener('DOMContentLoaded', function () {
         if (data.valid) {
           window.location.href = `/parcours?numParcours=${data.numParcours}`;
         } else {
-          console.log("Erreur dans la création d'un nouveau parcours")
+          console.log("Erreur dans la création d'un nouveau parcours");
+          if (typeof window.showError === 'function') {
+            window.showError("Erreur lors de la création du parcours. Veuillez réessayer.");
+          }
         }
       } catch (error) {
         console.error("Erreur serveur lors de la création d'un nouveau parcours :", error);
+        // L'erreur est déjà gérée par fetchWithJson avec le loader
       }
     })();
   });
@@ -50,6 +70,11 @@ document.addEventListener('DOMContentLoaded', function () {
     const produit = document.getElementById('produit').innerHTML.replace(/\s/g, '');
     let filename;
 
+    // Activer le loader
+    if (typeof window.showLoader === 'function') {
+      window.showLoader();
+    }
+
     // Envoi de la requête POST au serveur pour générer le projet
     fetch(`/generate/${produit}/projet/${numParcours}`, {
       method: 'POST',
@@ -78,8 +103,22 @@ document.addEventListener('DOMContentLoaded', function () {
       a.click(); // Simule un clic sur l'élément pour déclencher le téléchargement
       window.URL.revokeObjectURL(url); // Nettoie l'URL objet
       a.remove(); // Supprime l'élément a du document
+      
+      // Désactiver le loader
+      if (typeof window.hideLoader === 'function') {
+        window.hideLoader();
+      }
     })
-    .catch(error => console.error('Erreur lors de la génération du projet:', error));
+    .catch(error => {
+      console.error('Erreur lors de la génération du projet:', error);
+      // Désactiver le loader et afficher l'erreur
+      if (typeof window.hideLoader === 'function') {
+        window.hideLoader();
+      }
+      if (typeof window.showError === 'function') {
+        window.showError('Erreur lors de la génération du projet. Vérifiez votre connexion.');
+      }
+    });
   });
 
   // Écoute de l'événement de soumission du formulaire
@@ -95,6 +134,7 @@ document.addEventListener('DOMContentLoaded', function () {
     // Envoi de la requête pour avoir le parcours
     (async () => {
       try {
+        // Le loader est déjà géré dans loadParcours via fetchWithJson
         await loadParcours(numParcours);
 
         // Accéder aux informations stockées du parcours

etv2/public/js/intermediaire-form.js

@@ -176,18 +176,24 @@ window.initSubmenuForm = initSubmenuForm;// Module IIFE pour éviter la pollutio
 
     async function handleModalExtract() {
         document.getElementById('modalExtraireIntermediaire').disabled = true;
-        const response = await fetch(`/client/extract`, {
+        
-            method: 'POST',
+        if (typeof window.showLoader === 'function') {
-            body: JSON.stringify({
+            window.showLoader();
-                "matricule": matricule,
+        }
-                "numClient": document.getElementById("modalNumClient").value
+        
-            }),
+        try {
-            headers: {
+            const response = await fetch(`/client/extract`, {
-                'Content-Type': 'application/json',
+                method: 'POST',
-            },
+                body: JSON.stringify({
-        });
+                    "matricule": matricule,
-        const res = await response.json();
+                    "numClient": document.getElementById("modalNumClient").value
-        if (res.valid) {
+                }),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+            const res = await response.json();
+            if (res.valid) {
             document.getElementById("error-extract").style.display = "none";
             document.getElementById('modalExtraireIntermediaire').disabled = false;
             console.log(res);
@@ -207,14 +213,28 @@ window.initSubmenuForm = initSubmenuForm;// Module IIFE pour éviter la pollutio
             validateField('codePostalIntermediaire', true);
             validateField('villeIntermediaire', true);
             updateSubmitButtonState('intermediaireForm');
-            // close le modal
+                // close le modal
-            const elem = document.getElementById('modalExtractAxAPAC');
+                const elem = document.getElementById('modalExtractAxAPAC');
-            const instance = M.Modal.getInstance(elem);
+                const instance = M.Modal.getInstance(elem);
-            instance.close();
+                instance.close();
-        } else {
+            } else {
-            document.getElementById("error-extract").style.display = "block";
+                document.getElementById("error-extract").style.display = "block";
+                document.getElementById('modalExtraireIntermediaire').disabled = false;
+                console.log("Problème rencontré lors de l'extraction cl063 AxA PAC :", res.error);
+                if (typeof window.showError === 'function') {
+                    window.showError("Erreur lors de l'extraction des données intermédiaire.");
+                }
+            }
+        } catch (error) {
+            console.error("Erreur lors de l'extraction intermédiaire:", error);
+            if (typeof window.showError === 'function') {
+                window.showError("Erreur lors de l'extraction. Vérifiez votre connexion.");
+            }
+        } finally {
             document.getElementById('modalExtraireIntermediaire').disabled = false;
-            console.log("Problème rencontré lors de l'extraction cl063 AxA PAC :", res.error);
+            if (typeof window.hideLoader === 'function') {
+                window.hideLoader();
+            }
         }
     }
 
@@ -222,39 +242,44 @@ window.initSubmenuForm = initSubmenuForm;// Module IIFE pour éviter la pollutio
     async function handleSubmitForm(event, redirection) {
         event.preventDefault();
 
-        let idIntermediaire = intermediaire?.id;
+        if (typeof window.showLoader === 'function') {
-        const numPortefeuille = document.getElementById('numPortefeuille').value;
+            window.showLoader();
-        let responseIntermediaire;
-
-        if (numPortefeuille) {
-            responseIntermediaire = await fetch(`/intermediaire/read/${numPortefeuille}`, {
-                method: 'GET',
-                headers: {'Content-Type': 'application/json'},
-            });
         }
-        const dataIntermediaire = await responseIntermediaire.json();
 
-        if (dataIntermediaire.valid) {
+        try {
-            idIntermediaire = dataIntermediaire.idIntermediaire;
+            let idIntermediaire = intermediaire?.id;
-        } else {
+            const numPortefeuille = document.getElementById('numPortefeuille').value;
-            // Créez l'intermediaire ici si non trouvé
+            let responseIntermediaire;
-            const responseCreateIntermediaire = await fetch(`/intermediaire/create`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-            });
-            const dataCreateIntermediaire = await responseCreateIntermediaire.json();
 
-            if (dataCreateIntermediaire.valid) {
+            if (numPortefeuille) {
-                idIntermediaire = dataCreateIntermediaire.intermediaire.id;
+                responseIntermediaire = await fetch(`/intermediaire/read/${numPortefeuille}`, {
+                    method: 'GET',
+                    headers: {'Content-Type': 'application/json'},
+                });
             }
-        }
+            const dataIntermediaire = await responseIntermediaire.json();
 
-        console.log(idIntermediaire);
+            if (dataIntermediaire.valid) {
+                idIntermediaire = dataIntermediaire.idIntermediaire;
+            } else {
+                // Créez l'intermediaire ici si non trouvé
+                const responseCreateIntermediaire = await fetch(`/intermediaire/create`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                });
+                const dataCreateIntermediaire = await responseCreateIntermediaire.json();
 
-        // // Mettre à jour le contrat avec l'ID du intermediaire
+                if (dataCreateIntermediaire.valid) {
-        if (idIntermediaire) {
+                    idIntermediaire = dataCreateIntermediaire.intermediaire.id;
+                }
+            }
+
+            console.log(idIntermediaire);
+
+            // // Mettre à jour le contrat avec l'ID du intermediaire
+            if (idIntermediaire) {
             let type
 
             if (document.getElementById('courtier').checked == true) {
@@ -320,8 +345,35 @@ window.initSubmenuForm = initSubmenuForm;// Module IIFE pour éviter la pollutio
 
                         } else {
                             console.log('Echec lors de la mise à jour de la relation id contrat - id client :', data);
+                            if (typeof window.hideLoader === 'function') {
+                                window.hideLoader();
+                            }
+                            if (typeof window.showError === 'function') {
+                                window.showError("Erreur lors de la mise à jour du contrat.");
+                            }
+                        }
+                    })
+                    .catch(error => {
+                        console.error("Erreur lors de la mise à jour du contrat:", error);
+                        if (typeof window.hideLoader === 'function') {
+                            window.hideLoader();
+                        }
+                        if (typeof window.showError === 'function') {
+                            window.showError("Erreur lors de la mise à jour. Vérifiez votre connexion.");
                         }
                     });
+            } else {
+                if (typeof window.hideLoader === 'function') {
+                    window.hideLoader();
+                }
+            }
+        } catch (error) {
+            console.error("Erreur lors de la soumission du formulaire intermédiaire:", error);
+            if (typeof window.hideLoader === 'function') {
+                window.hideLoader();
+            }
+            if (typeof window.showError === 'function') {
+                window.showError("Erreur lors de la soumission. Vérifiez votre connexion.");
             }
         }
     }

etv2/public/js/loader.js

@@ -3,21 +3,40 @@ document.addEventListener("DOMContentLoaded", () => {
   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(() => {
-      loader.classList.add("active");
+      // 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);
   };
@@ -25,6 +44,7 @@ document.addEventListener("DOMContentLoaded", () => {
   //cas d'erreur
   window.showError = function(msg) {
     clearTimeout(activateTimeout);
+    clearTimeout(timeoutError);
     errorMessage.textContent = msg;
     errorMessage.style.display = "block";
   };

etv2/public/js/nav-parcours.js

@@ -122,7 +122,13 @@ document.addEventListener('DOMContentLoaded', function() {
             })
             hideLoader();
         })
-        .catch(error => console.error('Error:', error));
+        .catch(error => {
+            console.error('Error:', error);
+            hideLoader();
+            if (typeof window.showError === 'function') {
+                window.showError("Erreur lors du chargement du formulaire. Vérifiez votre connexion.");
+            }
+        });
 
         //A MODIFIER UNE FOIS QUE RC SERA ADAPTé AU PARCOURS
         if (produit == "RC") {

etv2/views/layout.ejs

@@ -32,8 +32,8 @@
 <body>
   <main>
 
-    <!-- Loader -->
+    <!-- Loader - Premier élément chargé pour affichage immédiat -->
-    <div id="loader-overlay" class="hidden">
+    <div id="loader-overlay">
       <div class="loader-spin-wrap">
         <div class="loader-spin"></div>
       </div>