Allow dynamic locale imports for web (#1971)

* allow dynamic locale imports for web

* remove unnecessary file

2 files changed, 29 insertions, 1 deletions

diff --git a/src/locale/i18n.ts b/src/locale/i18n.ts
index c64a914f8..73fa785ea 100644
--- a/src/locale/i18n.ts
+++ b/src/locale/i18n.ts
@@ -18,7 +18,6 @@ export const defaultLocale = 'en'
  * @param locale any locale string
  */
 export async function dynamicActivate(locale: string) {
-  console.log('dynamicActivate', locale)
   if (locale === 'en') {
     i18n.loadAndActivate({locale, messages: messagesEn})
     return
diff --git a/src/locale/i18n.web.ts b/src/locale/i18n.web.ts
new file mode 100644
index 000000000..0ea69d1ae
--- /dev/null
+++ b/src/locale/i18n.web.ts
@@ -0,0 +1,29 @@
+import {useLanguagePrefs} from '#/state/preferences'
+import {i18n} from '@lingui/core'
+import {useEffect} from 'react'
+
+export const locales = {
+  en: 'English',
+  cs: 'Česky',
+  fr: 'Français',
+  hi: 'हिंदी',
+  es: 'Español',
+}
+export const defaultLocale = 'en'
+
+/**
+ * We do a dynamic import of just the catalog that we need
+ * @param locale any locale string
+ */
+export async function dynamicActivate(locale: string) {
+  const {messages} = await import(`./locales/${locale}/messages`)
+  i18n.load(locale, messages)
+  i18n.activate(locale)
+}
+
+export async function useLocaleLanguage() {
+  const {appLanguage} = useLanguagePrefs()
+  useEffect(() => {
+    dynamicActivate(appLanguage)
+  }, [appLanguage])
+}