Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

frontend: lazy-load languages #2993

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

frontend: lazy-load languages #2993

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion frontends/web/src/components/language/language.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,14 @@ import { useTranslation } from 'react-i18next';
import { TLanguagesList } from './types';

vi.mock('react-i18next', () => ({
useTranslation: vi.fn()
useTranslation: vi.fn(),
hasResourceBundle: vi.fn(),
addResourceBundle: vi.fn(),
changeLanguage: vi.fn()
}));

vi.mock('@/i18n/i18n', () => ({
changei18nLanguage: vi.fn()
}));

describe('components/language/language', () => {
Expand Down
7 changes: 4 additions & 3 deletions frontends/web/src/components/language/language.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { Dialog } from '@/components/dialog/dialog';
import { defaultLanguages, TActiveLanguageCodes, TLanguagesList } from './types';
import style from './language.module.css';
import { getSelectedIndex } from '@/utils/language';
import { changei18nLanguage } from '@/i18n/i18n';

type TLanguageSwitchProps = {
languages?: TLanguagesList;
Expand All @@ -34,10 +35,10 @@ const LanguageSwitch = ({ languages }: TLanguageSwitchProps) => {
const [selectedIndex, setSelectedIndex] = useState<number>(getSelectedIndex(allLanguages, i18n));
const [activeDialog, setActiveDialog] = useState<boolean>(false);

const changeLanguage = (langCode: TActiveLanguageCodes, index: number) => {
const changeLanguage = async (langCode: TActiveLanguageCodes, index: number) => {
setSelectedIndex(index);
setActiveDialog(false);
i18n.changeLanguage(langCode);
await changei18nLanguage(langCode);
};

if (allLanguages.length === 1) {
Expand Down Expand Up @@ -106,4 +107,4 @@ const LanguageSwitch = ({ languages }: TLanguageSwitchProps) => {
);
};

export { LanguageSwitch };
export { LanguageSwitch };
134 changes: 75 additions & 59 deletions frontends/web/src/i18n/i18n.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,36 +17,59 @@

import i18n from 'i18next';
import { getNativeLocale } from '@/api/nativelocale';
import appTranslationsAR from '@/locales/ar/app.json';
import appTranslationsCS from '@/locales/cs/app.json';
import appTranslationsDE from '@/locales/de/app.json';
import appTranslationsEN from '@/locales/en/app.json';
import appTranslationsFR from '@/locales/fr/app.json';
import appTranslationsJA from '@/locales/ja/app.json';
import appTranslationsRU from '@/locales/ru/app.json';
import appTranslationsMS from '@/locales/ms/app.json';
import appTranslationsNL from '@/locales/nl/app.json';
import appTranslationsPT from '@/locales/pt/app.json';
import appTranslationsHI from '@/locales/hi/app.json';
import appTranslationsBG from '@/locales/bg/app.json';
import appTranslationsTR from '@/locales/tr/app.json';
import appTranslationsZH from '@/locales/zh/app.json';
import appTranslationsFA from '@/locales/fa/app.json';
import appTranslationsES from '@/locales/es/app.json';
import appTranslationsSL from '@/locales/sl/app.json';
import appTranslationsHE from '@/locales/he/app.json';
import appTranslationsIT from '@/locales/it/app.json';
import { languageFromConfig } from './config';
import { localeMainLanguage } from './utils';
import { setConfig } from '@/utils/config';

const locizeProjectID = 'fe4e5a24-e4a2-4903-96fc-3d62c11fc502';

let i18Init = i18n
.use(languageFromConfig);
let isChangingLanguage = false;
const defaultLang = 'en';

const languageResources = {
ar: () => import('@/locales/ar/app.json'),
cs: () => import('@/locales/cs/app.json'),
de: () => import('@/locales/de/app.json'),
en: () => import('@/locales/en/app.json'),
fr: () => import('@/locales/fr/app.json'),
ja: () => import('@/locales/ja/app.json'),
ru: () => import('@/locales/ru/app.json'),
ms: () => import('@/locales/ms/app.json'),
nl: () => import('@/locales/nl/app.json'),
pt: () => import('@/locales/pt/app.json'),
hi: () => import('@/locales/hi/app.json'),
bg: () => import('@/locales/bg/app.json'),
tr: () => import('@/locales/tr/app.json'),
zh: () => import('@/locales/zh/app.json'),
fa: () => import('@/locales/fa/app.json'),
es: () => import('@/locales/es/app.json'),
sl: () => import('@/locales/sl/app.json'),
he: () => import('@/locales/he/app.json'),
it: () => import('@/locales/it/app.json')
};

type LanguageKey = keyof typeof languageResources;

export const loadLanguage = async (language: string) => {
try {
const resources = await languageResources[language as LanguageKey]();
if (!i18n.hasResourceBundle(language, 'app')) {
i18n.addResourceBundle(language, 'app', resources.default || resources);
}
} catch (error) {
console.error(`Failed to load language resources for ${language}:`, error);
}
};

export const changei18nLanguage = async (language: string) => {
await loadLanguage(language);
await i18n.changeLanguage(language);
};

let i18Init = i18n.use(languageFromConfig);

i18Init.init({
fallbackLng: 'en',
fallbackLng: defaultLang,

// have a common namespace used around the full app
ns: ['app', 'wallet'],
Expand All @@ -59,56 +82,49 @@ i18Init.init({
},

react: {
useSuspense : true, // Not using Suspense you will need to handle the not ready state yourself
useSuspense: true // Not using Suspense you will need to handle the not ready state yourself
},

backend: {
projectId: locizeProjectID,
referenceLng: 'en'
},
referenceLng: defaultLang
}
});

i18n.addResourceBundle('ar', 'app', appTranslationsAR);
i18n.addResourceBundle('cs', 'app', appTranslationsCS);
i18n.addResourceBundle('de', 'app', appTranslationsDE);
i18n.addResourceBundle('en', 'app', appTranslationsEN);
i18n.addResourceBundle('fr', 'app', appTranslationsFR);
i18n.addResourceBundle('ja', 'app', appTranslationsJA);
i18n.addResourceBundle('ms', 'app', appTranslationsMS);
i18n.addResourceBundle('nl', 'app', appTranslationsNL);
i18n.addResourceBundle('ru', 'app', appTranslationsRU);
i18n.addResourceBundle('pt', 'app', appTranslationsPT);
i18n.addResourceBundle('hi', 'app', appTranslationsHI);
i18n.addResourceBundle('bg', 'app', appTranslationsBG);
i18n.addResourceBundle('tr', 'app', appTranslationsTR);
i18n.addResourceBundle('zh', 'app', appTranslationsZH);
i18n.addResourceBundle('fa', 'app', appTranslationsFA);
i18n.addResourceBundle('es', 'app', appTranslationsES);
i18n.addResourceBundle('sl', 'app', appTranslationsSL);
i18n.addResourceBundle('he', 'app', appTranslationsHE);
i18n.addResourceBundle('it', 'app', appTranslationsIT);

i18n.on('languageChanged', (lng) => {
// Set userLanguage in config back to empty if system locale matches
// the newly selected language lng to make the app use native-locale again.
// This also covers partial matches. For example, if native locale is pt_BR
// and the app has only pt translation, assume they match.
//
// Since userLanguage is stored in the backend config as a string,
// setting it to null here in JS turns it into an empty string "" in Go backend.
// This is ok since we're just checking for a truthy value in the language detector.
return getNativeLocale().then((nativeLocale) => {
// load the default language first
loadLanguage(defaultLang);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found a small bug in the Qt app:

When the userLanguage in config.json is an empty string (or not defined) the Qt BBApp will always start with English instead of using the native language.

We purposely store an empty string in case the user changes the language to be the same as the system.

How to test:

  • change system to something else than English, i.e. German
  • change userLanguage to empty string in ~/Library/Application\ Support/bitbox/config.json
  • open the Qt app, English loads, but expected is that the BBapp loads in German

I can't reproduce this well in webdev as native-locale gives me an empty string on webdev so it always goes to En for me in webdev.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I played a bit around and the 2nd commit in #3053 fixes the issue for me. Could you test with this and if it works for you squash it into your commit?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your version actually partly tries to load to German (with de system and userlang empty string) but the UI is still in English:
Bildschirmfoto 2024-11-15 um 12 18 39


i18n.on('languageChanged', async (lng) => {
// changei18nLanguage triggers languageChanged, thus this check to prevent loop
if (isChangingLanguage) {
return;
}

try {
isChangingLanguage = true;
// Set userLanguage in config back to empty if system locale matches
// the newly selected language lng to make the app use native-locale again.
// This also covers partial matches. For example, if native locale is pt_BR
// and the app has only pt translation, assume they match.
//
// Since userLanguage is stored in the backend config as a string,
// setting it to null here in JS turns it into an empty string "" in Go backend.
// This is ok since we're just checking for a truthy value in the language detector.
const nativeLocale = await getNativeLocale();
let match = lng === nativeLocale;

if (!match) {
// There are too many combinations. So, we compare only the main
// language tag.
const lngLang = localeMainLanguage(lng);
const localeLang = localeMainLanguage(nativeLocale);
const lngLang = localeMainLanguage(lng);
await changei18nLanguage(localeMainLanguage(lng));
match = lngLang === localeLang;
}

const uiLang = match ? null : lng;
return setConfig({ backend: { userLanguage: uiLang } });
});
} finally {
isChangingLanguage = false;
}
});

export { i18n };
3 changes: 2 additions & 1 deletion frontends/web/src/routes/settings/components/appearance/languageDropdownSetting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { SingleDropdown } from '@/routes/settings/components/dropdowns/singledro
import { GlobeDark, GlobeLight } from '@/components/icon/icon';
import { useDarkmode } from '@/hooks/darkmode';
import styles from './languageDropDownSetting.module.css';
import { changei18nLanguage } from '@/i18n/i18n';

export const LanguageDropdownSetting = () => {
const { i18n, t } = useTranslation();
Expand All @@ -41,7 +42,7 @@ export const LanguageDropdownSetting = () => {
extraComponent={
<SingleDropdown
options={formattedLanguages}
handleChange={i18n.changeLanguage}
handleChange={changei18nLanguage}
value={{ label: selectedLanguage.display, value: selectedLanguage.code }}
/>
}
Expand Down
Loading