Fixed: Improve translation loading

frontend/src/Components/Page/PageConnector.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { createSelector } from 'reselect';
-import { saveDimensions, setIsSidebarVisible } from 'Store/Actions/appActions';
+import { fetchTranslations, saveDimensions, setIsSidebarVisible } from 'Store/Actions/appActions';
 import { fetchCustomFilters } from 'Store/Actions/customFilterActions';
 import { fetchSeries } from 'Store/Actions/seriesActions';
 import { fetchImportLists, fetchLanguages, fetchQualityProfiles, fetchUISettings } from 'Store/Actions/settingsActions';
@@ -52,6 +52,7 @@ const selectIsPopulated = createSelector(
   (state) => state.settings.languages.isPopulated,
   (state) => state.settings.importLists.isPopulated,
   (state) => state.system.status.isPopulated,
+  (state) => state.app.translations.isPopulated,
   (
     seriesIsPopulated,
     customFiltersIsPopulated,
@@ -60,7 +61,8 @@ const selectIsPopulated = createSelector(
     qualityProfilesIsPopulated,
     languagesIsPopulated,
     importListsIsPopulated,
-    systemStatusIsPopulated
+    systemStatusIsPopulated,
+    translationsIsPopulated
   ) => {
     return (
       seriesIsPopulated &&
@@ -70,7 +72,8 @@ const selectIsPopulated = createSelector(
       qualityProfilesIsPopulated &&
       languagesIsPopulated &&
       importListsIsPopulated &&
-      systemStatusIsPopulated
+      systemStatusIsPopulated &&
+      translationsIsPopulated
     );
   }
 );
@@ -84,6 +87,7 @@ const selectErrors = createSelector(
   (state) => state.settings.languages.error,
   (state) => state.settings.importLists.error,
   (state) => state.system.status.error,
+  (state) => state.app.translations.error,
   (
     seriesError,
     customFiltersError,
@@ -92,7 +96,8 @@ const selectErrors = createSelector(
     qualityProfilesError,
     languagesError,
     importListsError,
-    systemStatusError
+    systemStatusError,
+    translationsError
   ) => {
     const hasError = !!(
       seriesError ||
@@ -102,7 +107,8 @@ const selectErrors = createSelector(
       qualityProfilesError ||
       languagesError ||
       importListsError ||
-      systemStatusError
+      systemStatusError ||
+      translationsError
     );
 
     return {
@@ -114,7 +120,8 @@ const selectErrors = createSelector(
       qualityProfilesError,
       languagesError,
       importListsError,
-      systemStatusError
+      systemStatusError,
+      translationsError
     };
   }
 );
@@ -173,6 +180,9 @@ function createMapDispatchToProps(dispatch, props) {
     dispatchFetchStatus() {
       dispatch(fetchStatus());
     },
+    dispatchFetchTranslations() {
+      dispatch(fetchTranslations());
+    },
     onResize(dimensions) {
       dispatch(saveDimensions(dimensions));
     },
@@ -205,6 +215,7 @@ class PageConnector extends Component {
       this.props.dispatchFetchImportLists();
       this.props.dispatchFetchUISettings();
       this.props.dispatchFetchStatus();
+      this.props.dispatchFetchTranslations();
     }
   }
 
@@ -220,7 +231,6 @@ class PageConnector extends Component {
 
   render() {
     const {
-      hasTranslationsError,
       isPopulated,
       hasError,
       dispatchFetchSeries,
@@ -230,15 +240,15 @@ class PageConnector extends Component {
       dispatchFetchImportLists,
       dispatchFetchUISettings,
       dispatchFetchStatus,
+      dispatchFetchTranslations,
       ...otherProps
     } = this.props;
 
-    if (hasTranslationsError || hasError || !this.state.isLocalStorageSupported) {
+    if (hasError || !this.state.isLocalStorageSupported) {
       return (
         <ErrorPage
           {...this.state}
           {...otherProps}
-          hasTranslationsError={hasTranslationsError}
         />
       );
     }
@@ -259,7 +269,6 @@ class PageConnector extends Component {
 }
 
 PageConnector.propTypes = {
-  hasTranslationsError: PropTypes.bool.isRequired,
   isPopulated: PropTypes.bool.isRequired,
   hasError: PropTypes.bool.isRequired,
   isSidebarVisible: PropTypes.bool.isRequired,
@@ -271,6 +280,7 @@ PageConnector.propTypes = {
   dispatchFetchImportLists: PropTypes.func.isRequired,
   dispatchFetchUISettings: PropTypes.func.isRequired,
   dispatchFetchStatus: PropTypes.func.isRequired,
+  dispatchFetchTranslations: PropTypes.func.isRequired,
   onSidebarVisibleChange: PropTypes.func.isRequired
 };