Fix stale language switching
This commit is contained in:
+19
@@ -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
|
||||
|
||||
@@ -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 (
|
||||
|
||||
Reference in New Issue
Block a user