Fixed: Faster artist endpoint (#874)

* Fixed: Speed up AllArtist API endpoint

* New: Display UI before artists have loaded

* Add test of new repository methods

frontend/src/Activity/Blacklist/BlacklistRow.js

@@ -50,6 +50,10 @@ class BlacklistRow extends Component {
       onRemovePress
     } = this.props;
 
+    if (!artist) {
+      return null;
+    }
+
     return (
       <TableRow>
         {

frontend/src/Activity/History/HistoryRow.js

@@ -67,7 +67,7 @@ class HistoryRow extends Component {
       onMarkAsFailedPress
     } = this.props;
 
-    if (!album) {
+    if (!artist || !album) {
       return null;
     }
 

frontend/src/AlbumStudio/AlbumStudio.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
@@ -145,7 +146,7 @@ class AlbumStudio extends Component {
 
           {
             !isFetching && !!error &&
-              <div>Unable to load the Album Studio</div>
+              <div>{getErrorMessage(error, 'Failed to load artist from API')}</div>
           }
 
           {

frontend/src/Artist/Editor/ArtistEditor.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
@@ -209,7 +210,7 @@ class ArtistEditor extends Component {
 
           {
             !isFetching && !!error &&
-              <div>Unable to load the calendar</div>
+              <div>{getErrorMessage(error, 'Failed to load artist from API')}</div>
           }
 
           {

frontend/src/Artist/Index/ArtistIndex.css

@@ -4,6 +4,12 @@
   overflow: hidden;
 }
 
+.errorMessage {
+  margin-top: 20px;
+  text-align: center;
+  font-size: 20px;
+}
+
 .contentBody {
   composes: contentBody from '~Components/Page/PageContentBody.css';
 

frontend/src/Artist/Index/ArtistIndex.js

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import { align, icons, sortDirections } from 'Helpers/Props';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
@@ -340,7 +341,9 @@ class ArtistIndex extends Component {
 
             {
               !isFetching && !!error &&
-                <div>Unable to load artist</div>
+                <div className={styles.errorMessage}>
+                  {getErrorMessage(error, 'Failed to load artist from API')}
+                </div>
             }
 
             {

frontend/src/Calendar/CalendarPage.css

@@ -12,3 +12,9 @@
   flex-grow: 1;
   width: 100%;
 }
+
+.errorMessage {
+  margin-top: 20px;
+  text-align: center;
+  font-size: 20px;
+}

frontend/src/Calendar/CalendarPage.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import { align, icons } from 'Helpers/Props';
 import PageContent from 'Components/Page/PageContent';
 import Measure from 'Components/Measure';
@@ -75,6 +76,7 @@ class CalendarPage extends Component {
       selectedFilterKey,
       filters,
       hasArtist,
+      artistError,
       missingAlbumIds,
       isSearchingForMissing,
       useCurrentPage,
@@ -131,21 +133,31 @@ class CalendarPage extends Component {
           className={styles.calendarPageBody}
           innerClassName={styles.calendarInnerPageBody}
         >
-          <Measure
-            whitelist={['width']}
-            onMeasure={this.onMeasure}
-          >
-            {
-              isMeasured ?
-                <PageComponent
-                  useCurrentPage={useCurrentPage}
-                /> :
-                <div />
-            }
-          </Measure>
+          {
+            artistError &&
+            <div className={styles.errorMessage}>
+              {getErrorMessage(artistError, 'Failed to load artist from API')}
+            </div>
+          }
 
           {
-            hasArtist &&
+            !artistError &&
+              <Measure
+                whitelist={['width']}
+                onMeasure={this.onMeasure}
+              >
+                {
+                  isMeasured ?
+                    <PageComponent
+                      useCurrentPage={useCurrentPage}
+                    /> :
+                    <div />
+                }
+              </Measure>
+          }
+
+          {
+            hasArtist && !!artistError &&
               <LegendConnector />
           }
         </PageContentBodyConnector>
@@ -169,6 +181,7 @@ CalendarPage.propTypes = {
   selectedFilterKey: PropTypes.string.isRequired,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   hasArtist: PropTypes.bool.isRequired,
+  artistError: PropTypes.object,
   missingAlbumIds: PropTypes.arrayOf(PropTypes.number).isRequired,
   isSearchingForMissing: PropTypes.bool.isRequired,
   useCurrentPage: PropTypes.bool.isRequired,

frontend/src/Calendar/CalendarPageConnector.js

@@ -72,7 +72,8 @@ function createMapStateToProps() {
         selectedFilterKey,
         filters,
         colorImpairedMode: uiSettings.enableColorImpairedMode,
-        hasArtist: !!artistCount,
+        hasArtist: !!artistCount.count,
+        artistError: artistCount.error,
         missingAlbumIds,
         isSearchingForMissing
       };

frontend/src/Components/Page/PageConnector.js

@@ -43,7 +43,6 @@ const selectAppProps = createSelector(
 );
 
 const selectIsPopulated = createSelector(
-  (state) => state.artist.isPopulated,
   (state) => state.customFilters.isPopulated,
   (state) => state.tags.isPopulated,
   (state) => state.settings.ui.isPopulated,
@@ -52,7 +51,6 @@ const selectIsPopulated = createSelector(
   (state) => state.settings.importLists.isPopulated,
   (state) => state.system.status.isPopulated,
   (
-    artistIsPopulated,
     customFiltersIsPopulated,
     tagsIsPopulated,
     uiSettingsIsPopulated,
@@ -62,7 +60,6 @@ const selectIsPopulated = createSelector(
     systemStatusIsPopulated
   ) => {
     return (
-      artistIsPopulated &&
       customFiltersIsPopulated &&
       tagsIsPopulated &&
       uiSettingsIsPopulated &&
@@ -75,7 +72,6 @@ const selectIsPopulated = createSelector(
 );
 
 const selectErrors = createSelector(
-  (state) => state.artist.error,
   (state) => state.customFilters.error,
   (state) => state.tags.error,
   (state) => state.settings.ui.error,
@@ -84,7 +80,6 @@ const selectErrors = createSelector(
   (state) => state.settings.importLists.error,
   (state) => state.system.status.error,
   (
-    artistError,
     customFiltersError,
     tagsError,
     uiSettingsError,
@@ -94,7 +89,6 @@ const selectErrors = createSelector(
     systemStatusError
   ) => {
     const hasError = !!(
-      artistError ||
       customFiltersError ||
       tagsError ||
       uiSettingsError ||
@@ -106,7 +100,6 @@ const selectErrors = createSelector(
 
     return {
       hasError,
-      artistError,
       customFiltersError,
       tagsError,
       uiSettingsError,

frontend/src/Store/Selectors/createArtistCountSelector.js

@@ -4,8 +4,12 @@ import createAllArtistSelector from './createAllArtistSelector';
 function createArtistCountSelector() {
   return createSelector(
     createAllArtistSelector(),
-    (artists) => {
-      return artists.length;
+    (state) => state.artist.error,
+    (artists, error) => {
+      return {
+        count: artists.length,
+        error
+      };
     }
   );
 }

frontend/src/Wanted/CutoffUnmet/CutoffUnmetRow.js

@@ -26,6 +26,10 @@ function CutoffUnmetRow(props) {
     onSelectedChange
   } = props;
 
+  if (!artist) {
+    return null;
+  }
+
   return (
     <TableRow>
       <TableSelectCell