Fix stale language switching

This commit is contained in:
lemon
2026-06-02 04:09:44 -07:00
parent 6a5c426648
commit b174152566
2 changed files with 21 additions and 2 deletions
+19
View File
@@ -95,6 +95,7 @@ function resolveLocaleFile(lng: string): string | undefined {
* already-loaded locales).
*/
const loadedLocales = new Set<string>(['en']);
let languageChangeRequest = 0;
async function loadLocale(lng: string): Promise<void> {
const file = resolveLocaleFile(lng);
@@ -134,6 +135,21 @@ async function loadLocale(lng: string): Promise<void> {
loadedLocales.add(file);
}
/**
* Switch languages only after the target locale has been registered.
*
* Calling i18next.changeLanguage() first can render React components against a
* missing lazy-loaded bundle, leaving them stuck on fallback English until an
* unrelated render happens. The request counter keeps rapid clicks ordered so a
* slower earlier download cannot overwrite the latest selection.
*/
export async function changeAppLanguage(lng: string): Promise<void> {
const request = ++languageChangeRequest;
await loadLocale(lng);
if (request !== languageChangeRequest) return;
await i18n.changeLanguage(lng);
}
i18n
.use(LanguageDetector)
.use(initReactI18next)
@@ -161,6 +177,9 @@ i18n
caches: ['localStorage'],
lookupLocalStorage: 'i18nextLng',
},
react: {
bindI18nStore: 'added',
},
});
// Load the locale the detector picked on startup. If it isn't English the
+2 -2
View File
@@ -3,7 +3,7 @@ import { Check, Languages } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { PageHeader } from '@/components/PageHeader';
import { useAppContext } from '@/hooks/useAppContext';
import i18n, { SUPPORTED_LANGUAGES, isRTLLanguage } from '@/i18n';
import { SUPPORTED_LANGUAGES, changeAppLanguage, isRTLLanguage } from '@/i18n';
import { cn } from '@/lib/utils';
export function LanguageSettingsPage() {
@@ -42,7 +42,7 @@ export function LanguageSettingsPage() {
const handleSelect = (code: string) => {
if (code === currentLng) return;
void i18n.changeLanguage(code);
void changeAppLanguage(code);
};
return (