lazy load locales (#1940)

* lazy load locales

* fix translation getter

* prettier ignore all generated i18n files

* fix menu translation reactivity

* put language and country translations into namespace

* use Intl.DisplayNames to provide language and region translations

* update typesafe-i18n

* fix newly added translations

* remove unused translations

* add fallback to locale code when Intl.DisplayNames is unavailable

front/src/i18n/locales.ts

@@ -1,52 +1,44 @@
 import { detectLocale, navigatorDetector, initLocalStorageDetector } from "typesafe-i18n/detectors";
 import { FALLBACK_LOCALE } from "../Enum/EnvironmentVariable";
-import { initI18n, setLocale } from "./i18n-svelte";
+import { setLocale } from "./i18n-svelte";
 import type { Locales } from "./i18n-types";
-import { baseLocale, getTranslationForLocale, locales } from "./i18n-util";
+import { baseLocale, locales } from "./i18n-util";
+import { loadLocaleAsync } from "./i18n-util.async";
 
-const fallbackLocale = FALLBACK_LOCALE || baseLocale;
+const fallbackLocale = (FALLBACK_LOCALE || baseLocale) as Locales;
 const localStorageProperty = "language";
 
 export const localeDetector = async () => {
     const exist = localStorage.getItem(localStorageProperty);
-    let detectedLocale: Locales = fallbackLocale as Locales;
+    let detectedLocale: Locales = fallbackLocale;
 
     if (exist) {
         const localStorageDetector = initLocalStorageDetector(localStorageProperty);
-        detectedLocale = detectLocale(fallbackLocale, locales, localStorageDetector) as Locales;
+        detectedLocale = detectLocale(fallbackLocale, locales, localStorageDetector);
     } else {
-        detectedLocale = detectLocale(fallbackLocale, locales, navigatorDetector) as Locales;
+        detectedLocale = detectLocale(fallbackLocale, locales, navigatorDetector);
     }
 
-    await initI18n(detectedLocale);
+    await setCurrentLocale(detectedLocale);
 };
 
-export const setCurrentLocale = (locale: Locales) => {
+export const setCurrentLocale = async (locale: Locales) => {
     localStorage.setItem(localStorageProperty, locale);
-    setLocale(locale).catch(() => {
-        console.log("Cannot reload the locale!");
-    });
+    await loadLocaleAsync(locale);
+    setLocale(locale);
 };
 
-export type DisplayableLocale = { id: Locales; language: string; country: string };
+export const displayableLocales: { id: Locales; language: string; region: string }[] = locales.map((locale) => {
+    const [language, region] = locale.split("-");
 
-function getDisplayableLocales() {
-    const localesObject: DisplayableLocale[] = [];
-    locales.forEach((locale) => {
-        getTranslationForLocale(locale)
-            .then((translations) => {
-                localesObject.push({
-                    id: locale,
-                    language: translations.language,
-                    country: translations.country,
-                });
-            })
-            .catch((error) => {
-                console.log(error);
-            });
-    });
+    // backwards compatibility
+    if (!Intl.DisplayNames) {
+        return { id: locale, language, region };
+    }
 
-    return localesObject;
-}
-
-export const displayableLocales = getDisplayableLocales();
+    return {
+        id: locale,
+        language: new Intl.DisplayNames(locale, { type: "language" }).of(language),
+        region: new Intl.DisplayNames(locale, { type: "region" }).of(region),
+    };
+});