From 243510a671b92c638aed2ff2e5cac5478566a853 Mon Sep 17 00:00:00 2001
From: ErickSkrauch <erickskrauch@yandex.ru>
Date: Fri, 5 Jun 2020 18:24:41 +0300
Subject: [PATCH] Remove defaultMessages from the production build. Don't run
 the application before active locale will be loaded

---
 babel.config.js                               | 2 ++
 package.json                                  | 2 +-
 packages/app/components/i18n/IntlProvider.tsx | 9 ++++++++-
 packages/app/components/user/factory.ts       | 5 +++++
 packages/app/services/i18n/i18n.ts            | 2 +-
 yarn.lock                                     | 5 ++---
 6 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index 93dd611..f458c89 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,6 +1,7 @@
 /* eslint-env node */
 // @ts-nocheck
 module.exports = function (api) {
+    const env = api.env();
     api.cache(true);
 
     return {
@@ -39,6 +40,7 @@ module.exports = function (api) {
                     removePrefix: 'packages.app',
                     messagesDir: './build/messages/',
                     useKey: true,
+                    removeDefaultMessage: env === 'production',
                 },
             ],
         ],
diff --git a/package.json b/package.json
index 8ded3bf..8572613 100644
--- a/package.json
+++ b/package.json
@@ -117,7 +117,7 @@
         "@typescript-eslint/eslint-plugin": "^3.0.0",
         "@typescript-eslint/parser": "^3.0.0",
         "babel-loader": "^8.0.0",
-        "babel-plugin-react-intl-auto": "^3.3.0",
+        "babel-plugin-react-intl-auto": "https://github.com/elyby/babel-plugin-react-intl-auto.git#build",
         "core-js": "3.6.5",
         "csp-webpack-plugin": "^2.0.2",
         "css-loader": "^3.5.3",
diff --git a/packages/app/components/i18n/IntlProvider.tsx b/packages/app/components/i18n/IntlProvider.tsx
index 9a26da9..9077ff1 100644
--- a/packages/app/components/i18n/IntlProvider.tsx
+++ b/packages/app/components/i18n/IntlProvider.tsx
@@ -5,12 +5,14 @@ import i18n from 'app/services/i18n';
 import { RootState } from 'app/reducers';
 
 const IntlProvider: ComponentType = ({ children }) => {
-    const [intl, setIntl] = useState<IntlShape>(i18n.getIntl());
+    const [intl, setIntl] = useState<IntlShape>();
     const locale = useSelector(({ i18n: i18nState }: RootState) => i18nState.locale);
 
     useEffect(() => {
         if (process.env.NODE_ENV === 'test') {
             // disable async modules loading in tests
+            setIntl(i18n.getIntl());
+
             return;
         }
 
@@ -19,6 +21,11 @@ const IntlProvider: ComponentType = ({ children }) => {
         })();
     }, [locale]);
 
+    // don't run the application until locale bundle will be loaded
+    if (!intl) {
+        return null;
+    }
+
     return <RawIntlProvider value={intl}>{children}</RawIntlProvider>;
 };
 
diff --git a/packages/app/components/user/factory.ts b/packages/app/components/user/factory.ts
index 210e6ff..c9c8583 100644
--- a/packages/app/components/user/factory.ts
+++ b/packages/app/components/user/factory.ts
@@ -2,6 +2,7 @@ import { authenticate, logoutStrangers } from 'app/components/accounts/actions';
 import { getActiveAccount } from 'app/components/accounts/reducer';
 import request from 'app/services/request';
 import { Store } from 'app/reducers';
+import i18n from 'app/services/i18n';
 
 import { changeLang } from './actions';
 import bearerHeaderMiddleware from './middlewares/bearerHeaderMiddleware';
@@ -44,6 +45,10 @@ export function factory(store: Store): Promise<void> {
 
             // auto-detect guest language
             await store.dispatch(changeLang(user.lang));
+        })
+        .then(() => {
+            // Preload the current locale before app will be started
+            i18n.require(store.getState().i18n.locale);
         });
 
     return promise;
diff --git a/packages/app/services/i18n/i18n.ts b/packages/app/services/i18n/i18n.ts
index aaee873..eb39612 100644
--- a/packages/app/services/i18n/i18n.ts
+++ b/packages/app/services/i18n/i18n.ts
@@ -70,7 +70,7 @@ class I18N {
         locale: string,
     ): Promise<{
         locale: string;
-        messages: { [key: string]: string };
+        messages: Record<string, string>;
     }> {
         const [{ default: messages }] = await Promise.all([
             import(/* webpackChunkName: "locale-[request]" */ `app/i18n/${locale}.json`),
diff --git a/yarn.lock b/yarn.lock
index 0b8bc3f..0e6c98f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4637,10 +4637,9 @@ babel-plugin-react-docgen@^4.0.0:
     react-docgen "^5.0.0"
     recast "^0.14.7"
 
-babel-plugin-react-intl-auto@^3.3.0:
+"babel-plugin-react-intl-auto@https://github.com/elyby/babel-plugin-react-intl-auto.git#build":
   version "3.3.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-react-intl-auto/-/babel-plugin-react-intl-auto-3.3.0.tgz#75c6ba8a1eb442f43c2ab85f1a75f4cc1e0d7857"
-  integrity sha512-08ZyGWtKrQY/rMNfdvrWPBsjqx+8CirqV4/JUM46FAS2aU98Mi/uWM60K6Wg6Zapdyqs3fCbQ8S4OfqMPsBiqQ==
+  resolved "https://github.com/elyby/babel-plugin-react-intl-auto.git#99d72ec15025aecbe62d422c3b0fafe3fcd0a787"
   dependencies:
     "@babel/core" "^7.9.0"
     "@babel/traverse" "^7.9.0"