From eeaea17c1f08878df27d82c968aa3b47fb82f605 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Fri, 14 Jul 2023 16:55:25 -0700
Subject: [PATCH] Fixed: Ensure translations are fetched before loading app

(cherry picked from commit ad2721dc55f3233e4c299babe5744418bc530418)

Closes #3868
Closes #3871
---
 frontend/build/webpack.config.js              |  4 +++
 frontend/src/App/App.js                       |  7 +++--
 frontend/src/Components/Page/ErrorPage.js     |  4 +++
 frontend/src/Components/Page/PageConnector.js |  5 +++-
 frontend/src/Utilities/String/translate.js    | 29 +++++++++++--------
 frontend/src/index.js                         |  5 +++-
 6 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/frontend/build/webpack.config.js b/frontend/build/webpack.config.js
index 82601a4151..9201a5e76f 100644
--- a/frontend/build/webpack.config.js
+++ b/frontend/build/webpack.config.js
@@ -84,6 +84,10 @@ module.exports = (env) => {
       hints: false
     },
 
+    experiments: {
+      topLevelAwait: true
+    },
+
     plugins: [
       new webpack.DefinePlugin({
         __DEV__: !isProduction,
diff --git a/frontend/src/App/App.js b/frontend/src/App/App.js
index 3871b14e9e..3c13193312 100644
--- a/frontend/src/App/App.js
+++ b/frontend/src/App/App.js
@@ -7,13 +7,13 @@ import PageConnector from 'Components/Page/PageConnector';
 import ApplyTheme from './ApplyTheme';
 import AppRoutes from './AppRoutes';
 
-function App({ store, history }) {
+function App({ store, history, hasTranslationsError }) {
   return (
     <DocumentTitle title={window.Lidarr.instanceName}>
       <Provider store={store}>
         <ConnectedRouter history={history}>
           <ApplyTheme>
-            <PageConnector>
+            <PageConnector hasTranslationsError={hasTranslationsError}>
               <AppRoutes app={App} />
             </PageConnector>
           </ApplyTheme>
@@ -25,7 +25,8 @@ function App({ store, history }) {
 
 App.propTypes = {
   store: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired
+  history: PropTypes.object.isRequired,
+  hasTranslationsError: PropTypes.bool.isRequired
 };
 
 export default App;
diff --git a/frontend/src/Components/Page/ErrorPage.js b/frontend/src/Components/Page/ErrorPage.js
index 4440cf3be5..7c58a675b3 100644
--- a/frontend/src/Components/Page/ErrorPage.js
+++ b/frontend/src/Components/Page/ErrorPage.js
@@ -7,6 +7,7 @@ function ErrorPage(props) {
   const {
     version,
     isLocalStorageSupported,
+    hasTranslationsError,
     artistError,
     customFiltersError,
     tagsError,
@@ -20,6 +21,8 @@ function ErrorPage(props) {
 
   if (!isLocalStorageSupported) {
     errorMessage = 'Local Storage is not supported or disabled. A plugin or private browsing may have disabled it.';
+  } else if (hasTranslationsError) {
+    errorMessage = 'Failed to load translations from API';
   } else if (artistError) {
     errorMessage = getErrorMessage(artistError, 'Failed to load artist from API');
   } else if (customFiltersError) {
@@ -52,6 +55,7 @@ function ErrorPage(props) {
 ErrorPage.propTypes = {
   version: PropTypes.string.isRequired,
   isLocalStorageSupported: PropTypes.bool.isRequired,
+  hasTranslationsError: PropTypes.bool.isRequired,
   artistError: PropTypes.object,
   customFiltersError: PropTypes.object,
   tagsError: PropTypes.object,
diff --git a/frontend/src/Components/Page/PageConnector.js b/frontend/src/Components/Page/PageConnector.js
index 985dcf9b98..7340be1a25 100644
--- a/frontend/src/Components/Page/PageConnector.js
+++ b/frontend/src/Components/Page/PageConnector.js
@@ -220,6 +220,7 @@ class PageConnector extends Component {
 
   render() {
     const {
+      hasTranslationsError,
       isPopulated,
       hasError,
       dispatchFetchArtist,
@@ -233,11 +234,12 @@ class PageConnector extends Component {
       ...otherProps
     } = this.props;
 
-    if (hasError || !this.state.isLocalStorageSupported) {
+    if (hasTranslationsError || hasError || !this.state.isLocalStorageSupported) {
       return (
         <ErrorPage
           {...this.state}
           {...otherProps}
+          hasTranslationsError={hasTranslationsError}
         />
       );
     }
@@ -258,6 +260,7 @@ class PageConnector extends Component {
 }
 
 PageConnector.propTypes = {
+  hasTranslationsError: PropTypes.bool.isRequired,
   isPopulated: PropTypes.bool.isRequired,
   hasError: PropTypes.bool.isRequired,
   isSidebarVisible: PropTypes.bool.isRequired,
diff --git a/frontend/src/Utilities/String/translate.js b/frontend/src/Utilities/String/translate.js
index 7529bb6168..9e7452741b 100644
--- a/frontend/src/Utilities/String/translate.js
+++ b/frontend/src/Utilities/String/translate.js
@@ -1,22 +1,27 @@
 import createAjaxRequest from 'Utilities/createAjaxRequest';
 
 function getTranslations() {
-  let localization = null;
-  const ajaxOptions = {
-    async: false,
+  return createAjaxRequest({
+    global: false,
     dataType: 'json',
-    url: '/localization',
-    success: function(data) {
-      localization = data.strings;
-    }
-  };
+    url: '/localization'
+  }).request;
+}
 
-  createAjaxRequest(ajaxOptions);
+let translations = {};
 
-  return localization;
-}
+export function fetchTranslations() {
+  return new Promise(async(resolve) => {
+    try {
+      const data = await getTranslations();
+      translations = data.strings;
 
-const translations = getTranslations();
+      resolve(true);
+    } catch (error) {
+      resolve(false);
+    }
+  });
+}
 
 export default function translate(key, args = []) {
   const translation = translations[key] || key;
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 40f4ae77c3..1c35b5872d 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -2,7 +2,7 @@ import { createBrowserHistory } from 'history';
 import React from 'react';
 import { render } from 'react-dom';
 import createAppStore from 'Store/createAppStore';
-import App from './App/App';
+import { fetchTranslations } from 'Utilities/String/translate';
 
 import 'Diag/ConsoleApi';
 import './preload';
@@ -12,11 +12,14 @@ import './index.css';
 
 const history = createBrowserHistory();
 const store = createAppStore(history);
+const hasTranslationsError = !await fetchTranslations();
+const { default: App } = await import('./App/App');
 
 render(
   <App
     store={store}
     history={history}
+    hasTranslationsError={hasTranslationsError}
   />,
   document.getElementById('root')
 );