Dynamicaly import locales (#1793)

* dynamicly import locales

* fix tests

* reformat languages

src/components/InitializeApp.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { LoadingMessage } from "./LoadingMessage";
+import { setLanguageFirstTime } from "../i18n";
+
+export class InitializeApp extends React.Component<
+  any,
+  { isLoading: boolean }
+> {
+  public state: { isLoading: boolean } = {
+    isLoading: true,
+  };
+
+  async componentDidMount() {
+    await setLanguageFirstTime();
+    this.setState({
+      isLoading: false,
+    });
+  }
+
+  public render() {
+    return this.state.isLoading ? <LoadingMessage /> : this.props.children;
+  }
+}

src/components/LayerUI.tsx

@@ -255,8 +255,8 @@ const LayerUI = ({
         }`}
       >
         <LanguageList
-          onChange={(lng) => {
-            setLanguage(lng);
+          onChange={async (lng) => {
+            await setLanguage(lng);
             setAppState({});
           }}
           languages={languages}

src/components/MobileMenu.tsx

@@ -100,8 +100,8 @@ export const MobileMenu = ({
                 <fieldset>
                   <legend>{t("labels.language")}</legend>
                   <LanguageList
-                    onChange={(lng) => {
-                      setLanguage(lng);
+                    onChange={async (lng) => {
+                      await setLanguage(lng);
                       setAppState({});
                     }}
                   />