From 1ee7b0f31ba82d17ba98b95e1022d0674c3e9288 Mon Sep 17 00:00:00 2001
From: shuaiplus <2327005759@qq.com>
Date: Sat, 6 Jun 2026 19:30:35 +0800
Subject: [PATCH] Fix initial i18n render crash on auth pages

Initialize locale messages before the first app render so the auth page does not diff from the fallback language into the detected locale during startup.

Mark the app root as non-translatable and keep the document language synchronized with the active locale to reduce browser translation DOM mutations.
---
 webapp/src/lib/i18n.ts | 12 ++++++++++++
 webapp/src/main.tsx    |  5 ++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/webapp/src/lib/i18n.ts b/webapp/src/lib/i18n.ts
index 5b1d94a..93a3ced 100644
--- a/webapp/src/lib/i18n.ts
+++ b/webapp/src/lib/i18n.ts
@@ -62,6 +62,15 @@ const localeLoaders: Record<Locale, () => Promise<{ default: MessageTable }>> =
   es: () => import('./i18n/locales/es'),
 };
 
+function localeToHtmlLang(value: Locale): string {
+  return value;
+}
+
+function syncDocumentLanguage(): void {
+  if (typeof document === 'undefined') return;
+  document.documentElement.lang = localeToHtmlLang(locale);
+}
+
 async function loadLocaleMessages(next: Locale): Promise<MessageTable> {
   const cached = loadedMessages.get(next);
   if (cached) return cached;
@@ -84,6 +93,8 @@ export async function initI18n(): Promise<void> {
     console.error('Failed to load locale, falling back to English:', error);
     locale = 'en';
     activeMessages = await loadFallbackMessages();
+  } finally {
+    syncDocumentLanguage();
   }
 }
 
@@ -143,6 +154,7 @@ export async function setLocale(next: Locale): Promise<void> {
   }
   locale = next;
   activeMessages = nextMessages;
+  syncDocumentLanguage();
   try {
     localStorage.setItem(LOCALE_STORAGE_KEY, next);
   } catch {
diff --git a/webapp/src/main.tsx b/webapp/src/main.tsx
index c7c709a..f45eed0 100644
--- a/webapp/src/main.tsx
+++ b/webapp/src/main.tsx
@@ -16,6 +16,7 @@ const queryClient = new QueryClient({
 });
 
 const root = document.getElementById('root')!;
+root.setAttribute('translate', 'no');
 
 function renderApp(): void {
   render(
@@ -26,8 +27,6 @@ function renderApp(): void {
   );
 }
 
-renderApp();
-
-void initI18n().then(() => {
+void initI18n().finally(() => {
   renderApp();
 });