updates the method of loading locales

awx/ui_next/package-lock.json

@@ -5389,6 +5389,11 @@
         "q": "^1.1.2"
       }
     },
+    "codemirror": {
+      "version": "5.60.0",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.60.0.tgz",
+      "integrity": "sha512-AEL7LhFOlxPlCL8IdTcJDblJm8yrAGib7I+DErJPdZd4l6imx8IMgKK3RblVgBQqz3TZJR4oknQ03bz+uNjBYA=="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -6670,6 +6675,12 @@
         }
       }
     },
+    "diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "dev": true
+    },
     "diff-match-patch": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
@@ -11743,8 +11754,7 @@
     "lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
-      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
-      "dev": true
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
     },
     "lodash.isequal": {
       "version": "4.5.0",

awx/ui_next/src/App.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   useRouteMatch,
   useLocation,
@@ -10,20 +10,13 @@ import {
 import { I18nProvider } from '@lingui/react';
 import { i18n } from '@lingui/core';
 
-import { en, es, fr, nl, zh, ja, zu } from 'make-plural/plurals';
 import AppContainer from './components/AppContainer';
 import Background from './components/Background';
 import NotFound from './screens/NotFound';
 import Login from './screens/Login';
 
-import japanese from './locales/ja/messages';
-import english from './locales/en/messages';
-import zulu from './locales/zu/messages';
-import french from './locales/fr/messages';
-import dutch from './locales/nl/messages';
-import chinese from './locales/zh/messages';
-import spanish from './locales/es/messages';
 import { isAuthenticated } from './util/auth';
+import { locales, dynamicActivate } from './i18nLoader';
 
 import { getLanguageWithoutRegionCode } from './util/language';
 
@@ -80,42 +73,19 @@ const ProtectedRoute = ({ children, ...rest }) =>
   );
 
 function App() {
-  const catalogs = {
-    en: english,
-    ja: japanese,
-    zu: zulu,
-    fr: french,
-    es: spanish,
-    zh: chinese,
-    nl: dutch,
-  };
   let language = getLanguageWithoutRegionCode(navigator);
-  if (!Object.keys(catalogs).includes(language)) {
+  if (!Object.keys(locales).includes(language)) {
     // If there isn't a string catalog available for the browser's
     // preferred language, default to one that has strings.
     language = 'en';
   }
   const { hash, search, pathname } = useLocation();
-
-  i18n.loadLocaleData('en', { plurals: en });
-  i18n.loadLocaleData('es', { plurals: es });
-  i18n.loadLocaleData('fr', { plurals: fr });
-  i18n.loadLocaleData('nl', { plurals: nl });
-  i18n.loadLocaleData('zh', { plurals: zh });
-  i18n.loadLocaleData('ja', { plurals: ja });
-  i18n.loadLocaleData('zu', { plurals: zu });
-  i18n.load({
-    en: english.messages,
-    ja: japanese.messages,
-    zu: zulu.messages,
-    fr: french.messages,
-    nl: dutch.messages,
-    zh: chinese.messages,
-    es: spanish.messages,
-  });
+  useEffect(() => {
+    dynamicActivate(language);
+  }, [language]);
   i18n.activate(language);
   return (
-    <I18nProvider i18n={i18n} catalogs={catalogs}>
+    <I18nProvider i18n={i18n}>
       <Background>
         <Switch>
           <Route exact strict path="/*/">

awx/ui_next/src/i18nLoader.js

@@ -0,0 +1,31 @@
+import { i18n } from '@lingui/core';
+import { en, fr, es, nl, ja, zh, zu } from 'make-plural/plurals';
+
+export const locales = {
+  en: 'English',
+  ja: 'Japanese',
+  zu: 'Zulu',
+  fr: 'French',
+  es: 'Spanish',
+  zh: 'Chinese',
+  nl: 'Dutch',
+};
+
+i18n.loadLocaleData({
+  en: { plurals: en },
+  fr: { plurals: fr },
+  es: { plurals: es },
+  nl: { plurals: nl },
+  ja: { plurals: ja },
+  zh: { plurals: zh },
+  zu: { plurals: zu },
+});
+
+/**
+ * We do a dynamic import of just the catalog that we need
+ * @param locale any locale string
+ */
+export async function dynamicActivate(locale) {
+  const { messages } = await import(`./locales/${locale}/messages`);
+  i18n.load(locale, messages);
+}