setup dynamic locale activation and async loading

src/App.web.tsx

@@ -14,6 +14,9 @@ import {Shell} from 'view/shell/index'
 import {ToastContainer} from 'view/com/util/Toast.web'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {queryClient} from 'lib/react-query'
+import {i18n} from '@lingui/core'
+import {I18nProvider} from '@lingui/react'
+import {defaultLocale, dynamicActivate} from './locale/i18n'
 
 const App = observer(function AppImpl() {
   const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
@@ -26,6 +29,7 @@ const App = observer(function AppImpl() {
       setRootStore(store)
       analytics.init(store)
     })
+    dynamicActivate(defaultLocale) // async import of locale data
   }, [])
 
   // show nothing prior to init
@@ -39,9 +43,11 @@ const App = observer(function AppImpl() {
         <RootSiblingParent>
           <analytics.Provider>
             <RootStoreProvider value={rootStore}>
-              <SafeAreaProvider>
+              <I18nProvider i18n={i18n}>
-                <Shell />
+                <SafeAreaProvider>
-              </SafeAreaProvider>
+                  <Shell />
+                </SafeAreaProvider>
+              </I18nProvider>
               <ToastContainer />
             </RootStoreProvider>
           </analytics.Provider>

src/locale/i18n.ts

@@ -0,0 +1,18 @@
+import {i18n} from '@lingui/core'
+
+export const locales = {
+  en: 'English',
+  cs: 'Česky',
+  fr: 'Français',
+}
+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)
+}

src/locale/locales/cs/messages.js

@@ -0,0 +1 @@
+/*eslint-disable*/module.exports={messages:JSON.parse("{}")};

src/locale/locales/en/messages.js

@@ -0,0 +1 @@
+/*eslint-disable*/module.exports={messages:JSON.parse("{}")};

src/locale/locales/fr/messages.js

@@ -0,0 +1 @@
+/*eslint-disable*/module.exports={messages:JSON.parse("{}")};