From 584919022006cefc1e65fd674edfd106d96d895f Mon Sep 17 00:00:00 2001
From: PaulVua <paulvuarambon@gmail.com>
Date: Tue, 17 Mar 2026 18:32:22 +0100
Subject: [PATCH] Fix: sidebar.html charge une seule fois au lieu de deux sur
 toutes les pages

Reduit de 3 a 2 les fetch au DOMContentLoaded, liberant un slot
de connexion HTTP. Corrige le blocage "pending" cause par la limite
de 6 connexions simultanees par domaine dans Chrome/Firefox.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 html/admin.html    | 29 +++++++++++------------
 html/database.html | 46 +++++++++++++++++--------------------
 html/index.html    | 37 +++++++++++++++---------------
 html/logs.html     | 29 +++++++++++------------
 html/map.html      | 29 +++++++++++------------
 html/saraR4.html   | 29 +++++++++++------------
 html/screen.html   | 57 ++++++++++++++++++++++++----------------------
 html/sensors.html  | 37 +++++++++++++++---------------
 html/terminal.html | 25 +++++++++-----------
 html/wifi.html     | 29 +++++++++++------------
 10 files changed, 165 insertions(+), 182 deletions(-)

diff --git a/html/admin.html b/html/admin.html
index c71143f..75113d1 100755
--- a/html/admin.html
+++ b/html/admin.html
@@ -412,23 +412,20 @@
 
 <script>
  document.addEventListener('DOMContentLoaded', function () {
-    const elementsToLoad = [
-        { id: 'topbar', file: 'topbar.html' },
-        { id: 'sidebar', file: 'sidebar.html' },
-        { id: 'sidebar_mobile', file: 'sidebar.html' }
-    ];
+    // Load topbar
+    fetch('topbar.html')
+        .then(r => r.text())
+        .then(data => { document.getElementById('topbar').innerHTML = data; })
+        .catch(e => console.error('Error loading topbar:', e));
 
-    elementsToLoad.forEach(({ id, file }) => {
-        fetch(file)
-            .then(response => response.text())
-            .then(data => {
-                const element = document.getElementById(id);
-                if (element) {
-                    element.innerHTML = data;
-                }
-            })
-            .catch(error => console.error(`Error loading ${file}:`, error));
-    });
+    // Load sidebar once, reuse for desktop + mobile
+    fetch('sidebar.html')
+        .then(r => r.text())
+        .then(data => {
+            document.getElementById('sidebar').innerHTML = data;
+            document.getElementById('sidebar_mobile').innerHTML = data;
+        })
+        .catch(e => console.error('Error loading sidebar:', e));
 });
 
 //end  document.addEventListener
diff --git a/html/database.html b/html/database.html
index 7b5924b..c25582e 100755
--- a/html/database.html
+++ b/html/database.html
@@ -181,15 +181,6 @@
  document.addEventListener('DOMContentLoaded', function () {
     console.log("DOMContentLoaded");
 
-    const elementsToLoad = [
-        { id: 'topbar', file: 'topbar.html' },
-        { id: 'sidebar', file: 'sidebar.html' },
-        { id: 'sidebar_mobile', file: 'sidebar.html' }
-    ];
-
-    let loadedCount = 0;
-    const totalElements = elementsToLoad.length;
-
     function applyTranslationsWhenReady() {
         if (typeof i18n !== 'undefined' && i18n.translations && Object.keys(i18n.translations).length > 0) {
             console.log("Applying translations to dynamically loaded content");
@@ -200,23 +191,28 @@
         }
     }
 
-    elementsToLoad.forEach(({ id, file }) => {
-        fetch(file)
-            .then(response => response.text())
-            .then(data => {
-                const element = document.getElementById(id);
-                if (element) {
-                    element.innerHTML = data;
-                }
-                loadedCount++;
+    let loadedCount = 0;
 
-                // Re-apply translations after all dynamic content is loaded
-                if (loadedCount === totalElements) {
-                    applyTranslationsWhenReady();
-                }
-            })
-            .catch(error => console.error(`Error loading ${file}:`, error));
-    });
+    // Load topbar
+    fetch('topbar.html')
+        .then(r => r.text())
+        .then(data => {
+            document.getElementById('topbar').innerHTML = data;
+            loadedCount++;
+            if (loadedCount === 2) applyTranslationsWhenReady();
+        })
+        .catch(e => console.error('Error loading topbar:', e));
+
+    // Load sidebar once, reuse for desktop + mobile
+    fetch('sidebar.html')
+        .then(r => r.text())
+        .then(data => {
+            document.getElementById('sidebar').innerHTML = data;
+            document.getElementById('sidebar_mobile').innerHTML = data;
+            loadedCount++;
+            if (loadedCount === 2) applyTranslationsWhenReady();
+        })
+        .catch(e => console.error('Error loading sidebar:', e));
 
     // Also listen for language change events to re-apply translations
     document.addEventListener('languageChanged', function() {
diff --git a/html/index.html b/html/index.html
index 0e7cbb8..d5007f2 100755
--- a/html/index.html
+++ b/html/index.html
@@ -136,27 +136,28 @@
 
   <script>
     document.addEventListener('DOMContentLoaded', function () {
-      const elementsToLoad = [
-        { id: 'topbar', file: 'topbar.html' },
-        { id: 'sidebar', file: 'sidebar.html' },
-        { id: 'sidebar_mobile', file: 'sidebar.html' }
-      ];
-
-      elementsToLoad.forEach(({ id, file }) => {
-        fetch(file)
-          .then(response => response.text())
+      // Load topbar
+      fetch('topbar.html')
+          .then(r => r.text())
           .then(data => {
-            const element = document.getElementById(id);
-            if (element) {
-              element.innerHTML = data;
-              // Apply translations after loading dynamic content
-              if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
-                window.i18n.applyTranslations();
-              }
+            document.getElementById('topbar').innerHTML = data;
+            if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
+              window.i18n.applyTranslations();
             }
           })
-          .catch(error => console.error(`Error loading ${file}:`, error));
-      });
+          .catch(e => console.error('Error loading topbar:', e));
+
+      // Load sidebar once, reuse for desktop + mobile
+      fetch('sidebar.html')
+          .then(r => r.text())
+          .then(data => {
+            document.getElementById('sidebar').innerHTML = data;
+            document.getElementById('sidebar_mobile').innerHTML = data;
+            if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
+              window.i18n.applyTranslations();
+            }
+          })
+          .catch(e => console.error('Error loading sidebar:', e));
 
 
     });
diff --git a/html/logs.html b/html/logs.html
index 03a3c5e..7ea819a 100755
--- a/html/logs.html
+++ b/html/logs.html
@@ -96,23 +96,20 @@
 
 <script>
  document.addEventListener('DOMContentLoaded', function () {
-    const elementsToLoad = [
-        { id: 'topbar', file: 'topbar.html' },
-        { id: 'sidebar', file: 'sidebar.html' },
-        { id: 'sidebar_mobile', file: 'sidebar.html' }
-    ];
+    // Load topbar
+    fetch('topbar.html')
+        .then(r => r.text())
+        .then(data => { document.getElementById('topbar').innerHTML = data; })
+        .catch(e => console.error('Error loading topbar:', e));
 
-    elementsToLoad.forEach(({ id, file }) => {
-        fetch(file)
-            .then(response => response.text())
-            .then(data => {
-                const element = document.getElementById(id);
-                if (element) {
-                    element.innerHTML = data;
-                }
-            })
-            .catch(error => console.error(`Error loading ${file}:`, error));
-    });
+    // Load sidebar once, reuse for desktop + mobile
+    fetch('sidebar.html')
+        .then(r => r.text())
+        .then(data => {
+            document.getElementById('sidebar').innerHTML = data;
+            document.getElementById('sidebar_mobile').innerHTML = data;
+        })
+        .catch(e => console.error('Error loading sidebar:', e));
 
     const loop_card_content = document.getElementById('card_loop_content');
     const boot_card_content = document.getElementById('card_boot_content');
diff --git a/html/map.html b/html/map.html
index 2cfda32..a41b3bc 100755
--- a/html/map.html
+++ b/html/map.html
@@ -121,23 +121,20 @@
 
 <script>
  document.addEventListener('DOMContentLoaded', function () {
-    const elementsToLoad = [
-        { id: 'topbar', file: 'topbar.html' },
-        { id: 'sidebar', file: 'sidebar.html' },
-        { id: 'sidebar_mobile', file: 'sidebar.html' }
-    ];
+    // Load topbar
+    fetch('topbar.html')
+        .then(r => r.text())
+        .then(data => { document.getElementById('topbar').innerHTML = data; })
+        .catch(e => console.error('Error loading topbar:', e));
 
-    elementsToLoad.forEach(({ id, file }) => {
-        fetch(file)
-            .then(response => response.text())
-            .then(data => {
-                const element = document.getElementById(id);
-                if (element) {
-                    element.innerHTML = data;
-                }
-            })
-            .catch(error => console.error(`Error loading ${file}:`, error));
-    });
+    // Load sidebar once, reuse for desktop + mobile
+    fetch('sidebar.html')
+        .then(r => r.text())
+        .then(data => {
+            document.getElementById('sidebar').innerHTML = data;
+            document.getElementById('sidebar_mobile').innerHTML = data;
+        })
+        .catch(e => console.error('Error loading sidebar:', e));
 
 
 
diff --git a/html/saraR4.html b/html/saraR4.html
index 749ed6d..e9789c7 100755
--- a/html/saraR4.html
+++ b/html/saraR4.html
@@ -397,23 +397,20 @@
 
 <script>
 document.addEventListener('DOMContentLoaded', function () {
-  const elementsToLoad = [
-      { id: 'topbar', file: 'topbar.html' },
-      { id: 'sidebar', file: 'sidebar.html' },
-      { id: 'sidebar_mobile', file: 'sidebar.html' }
-  ];
+  // Load topbar
+  fetch('topbar.html')
+      .then(r => r.text())
+      .then(data => { document.getElementById('topbar').innerHTML = data; })
+      .catch(e => console.error('Error loading topbar:', e));
 
-  elementsToLoad.forEach(({ id, file }) => {
-      fetch(file)
-          .then(response => response.text())
-          .then(data => {
-              const element = document.getElementById(id);
-              if (element) {
-                  element.innerHTML = data;
-              }
-          })
-          .catch(error => console.error(`Error loading ${file}:`, error));
-  });
+  // Load sidebar once, reuse for desktop + mobile
+  fetch('sidebar.html')
+      .then(r => r.text())
+      .then(data => {
+          document.getElementById('sidebar').innerHTML = data;
+          document.getElementById('sidebar_mobile').innerHTML = data;
+      })
+      .catch(e => console.error('Error loading sidebar:', e));
 
   //OLD way to retreive data from JSON
   /*
diff --git a/html/screen.html b/html/screen.html
index 14b49f6..9e8daca 100644
--- a/html/screen.html
+++ b/html/screen.html
@@ -108,34 +108,37 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', function () {
-            const elementsToLoad = [
-                { id: 'topbar', file: 'topbar.html' },
-                { id: 'sidebar', file: 'sidebar.html' },
-                { id: 'sidebar_mobile', file: 'sidebar.html' }
-            ];
+            // Load topbar
+            fetch('topbar.html')
+                .then(r => r.text())
+                .then(data => {
+                    document.getElementById('topbar').innerHTML = data;
+                    if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
+                        window.i18n.applyTranslations();
+                    }
+                })
+                .catch(e => console.error('Error loading topbar:', e));
 
-            elementsToLoad.forEach(({ id, file }) => {
-                fetch(file)
-                    .then(response => response.text())
-                    .then(data => {
-                        const element = document.getElementById(id);
-                        if (element) {
-                            element.innerHTML = data;
-                            // Apply translations after loading dynamic content
-                            if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
-                                window.i18n.applyTranslations();
-                            }
-                            // Ensure the screen tab is visible here as well
-                            if (id.includes('sidebar')) {
-                                setTimeout(() => {
-                                    const navScreenElements = element.querySelectorAll('.nav-screen-item');
-                                    navScreenElements.forEach(el => el.style.display = 'flex');
-                                }, 100);
-                            }
-                        }
-                    })
-                    .catch(error => console.error(`Error loading ${file}:`, error));
-            });
+            // Load sidebar once, reuse for desktop + mobile
+            fetch('sidebar.html')
+                .then(r => r.text())
+                .then(data => {
+                    const sidebar = document.getElementById('sidebar');
+                    const sidebarMobile = document.getElementById('sidebar_mobile');
+                    sidebar.innerHTML = data;
+                    sidebarMobile.innerHTML = data;
+                    if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
+                        window.i18n.applyTranslations();
+                    }
+                    // Ensure the screen tab is visible in both sidebars
+                    setTimeout(() => {
+                        [sidebar, sidebarMobile].forEach(el => {
+                            const navScreenElements = el.querySelectorAll('.nav-screen-item');
+                            navScreenElements.forEach(item => item.style.display = 'flex');
+                        });
+                    }, 100);
+                })
+                .catch(e => console.error('Error loading sidebar:', e));
 
             // Translation fallback for now if keys are missing
             setTimeout(() => {
diff --git a/html/sensors.html b/html/sensors.html
index 3729264..894426a 100755
--- a/html/sensors.html
+++ b/html/sensors.html
@@ -89,27 +89,28 @@
 
   <script>
     document.addEventListener('DOMContentLoaded', function () {
-      const elementsToLoad = [
-        { id: 'topbar', file: 'topbar.html' },
-        { id: 'sidebar', file: 'sidebar.html' },
-        { id: 'sidebar_mobile', file: 'sidebar.html' }
-      ];
-
-      elementsToLoad.forEach(({ id, file }) => {
-        fetch(file)
-          .then(response => response.text())
+      // Load topbar
+      fetch('topbar.html')
+          .then(r => r.text())
           .then(data => {
-            const element = document.getElementById(id);
-            if (element) {
-              element.innerHTML = data;
-              // Apply translations after loading dynamic content
-              if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
-                window.i18n.applyTranslations();
-              }
+            document.getElementById('topbar').innerHTML = data;
+            if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
+              window.i18n.applyTranslations();
             }
           })
-          .catch(error => console.error(`Error loading ${file}:`, error));
-      });
+          .catch(e => console.error('Error loading topbar:', e));
+
+      // Load sidebar once, reuse for desktop + mobile
+      fetch('sidebar.html')
+          .then(r => r.text())
+          .then(data => {
+            document.getElementById('sidebar').innerHTML = data;
+            document.getElementById('sidebar_mobile').innerHTML = data;
+            if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
+              window.i18n.applyTranslations();
+            }
+          })
+          .catch(e => console.error('Error loading sidebar:', e));
     });
 
     function getNPM_values(port) {
diff --git a/html/terminal.html b/html/terminal.html
index df1ea87..e6ee87a 100644
--- a/html/terminal.html
+++ b/html/terminal.html
@@ -179,23 +179,20 @@
 
   <script>
     document.addEventListener('DOMContentLoaded', function () {
-      const elementsToLoad = [
-        { id: 'topbar', file: 'topbar.html' },
-        { id: 'sidebar', file: 'sidebar.html' },
-        { id: 'sidebar_mobile', file: 'sidebar.html' }
-      ];
+      // Load topbar
+      fetch('topbar.html')
+          .then(r => r.text())
+          .then(data => { document.getElementById('topbar').innerHTML = data; })
+          .catch(e => console.error('Error loading topbar:', e));
 
-      elementsToLoad.forEach(({ id, file }) => {
-        fetch(file)
-          .then(response => response.text())
+      // Load sidebar once, reuse for desktop + mobile
+      fetch('sidebar.html')
+          .then(r => r.text())
           .then(data => {
-            const element = document.getElementById(id);
-            if (element) {
-              element.innerHTML = data;
-            }
+            document.getElementById('sidebar').innerHTML = data;
+            document.getElementById('sidebar_mobile').innerHTML = data;
           })
-          .catch(error => console.error(`Error loading ${file}:`, error));
-      });
+          .catch(e => console.error('Error loading sidebar:', e));
 
       // Initialize elements
       initializeElements();
diff --git a/html/wifi.html b/html/wifi.html
index cfd19fd..26e4e1a 100755
--- a/html/wifi.html
+++ b/html/wifi.html
@@ -215,23 +215,20 @@
  document.addEventListener('DOMContentLoaded', function () {
     console.log("DOMContentLoaded");
 
-    const elementsToLoad = [
-        { id: 'topbar', file: 'topbar.html' },
-        { id: 'sidebar', file: 'sidebar.html' },
-        { id: 'sidebar_mobile', file: 'sidebar.html' }
-    ];
+    // Load topbar
+    fetch('topbar.html')
+        .then(r => r.text())
+        .then(data => { document.getElementById('topbar').innerHTML = data; })
+        .catch(e => console.error('Error loading topbar:', e));
 
-    elementsToLoad.forEach(({ id, file }) => {
-        fetch(file)
-            .then(response => response.text())
-            .then(data => {
-                const element = document.getElementById(id);
-                if (element) {
-                    element.innerHTML = data;
-                }
-            })
-            .catch(error => console.error(`Error loading ${file}:`, error));
-    });
+    // Load sidebar once, reuse for desktop + mobile
+    fetch('sidebar.html')
+        .then(r => r.text())
+        .then(data => {
+            document.getElementById('sidebar').innerHTML = data;
+            document.getElementById('sidebar_mobile').innerHTML = data;
+        })
+        .catch(e => console.error('Error loading sidebar:', e));
 
     
 });