From f6797325917cd544f994b210e63420562c1fc6b6 Mon Sep 17 00:00:00 2001
From: PaulVua <paulvuarambon@gmail.com>
Date: Wed, 7 Jan 2026 14:42:33 +0100
Subject: [PATCH] Fix i18n translations not applying properly on database page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed race condition where translations weren't being applied to the database page when French language was selected. The issue was caused by the i18n system loading asynchronously while page content was being rendered.

Changes:
- Added applyTranslationsWhenReady() function that waits for translations to load
- Re-apply translations after dynamic content (sidebar/topbar) is loaded
- Added languageChanged event listener to re-apply translations on language switch
- Ensures all text appears in the selected language (French/English)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 html/database.html | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/html/database.html b/html/database.html
index 97d42a8..8b56031 100755
--- a/html/database.html
+++ b/html/database.html
@@ -148,6 +148,19 @@
         { 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");
+            i18n.applyTranslations();
+        } else {
+            // Retry after a short delay if translations aren't loaded yet
+            setTimeout(applyTranslationsWhenReady, 100);
+        }
+    }
+
     elementsToLoad.forEach(({ id, file }) => {
         fetch(file)
             .then(response => response.text())
@@ -156,11 +169,22 @@
                 if (element) {
                     element.innerHTML = data;
                 }
+                loadedCount++;
+
+                // Re-apply translations after all dynamic content is loaded
+                if (loadedCount === totalElements) {
+                    applyTranslationsWhenReady();
+                }
             })
             .catch(error => console.error(`Error loading ${file}:`, error));
     });
 
-    
+    // Also listen for language change events to re-apply translations
+    document.addEventListener('languageChanged', function() {
+        console.log("Language changed, re-applying translations");
+        i18n.applyTranslations();
+    });
+
 });