Fixed: Don't Show NoArtist on Calendar if Artists are Loading

frontend/src/Calendar/CalendarPage.js

@@ -9,6 +9,7 @@ import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import FilterMenu from 'Components/Menu/FilterMenu';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import NoArtist from 'Artist/NoArtist';
 import CalendarLinkModal from './iCal/CalendarLinkModal';
 import CalendarOptionsModal from './Options/CalendarOptionsModal';
@@ -77,6 +78,8 @@ class CalendarPage extends Component {
       filters,
       hasArtist,
       artistError,
+      artistIsFetching,
+      artistIsPopulated,
       missingAlbumIds,
       isSearchingForMissing,
       useCurrentPage,
@@ -90,8 +93,6 @@ class CalendarPage extends Component {
 
     const isMeasured = this.state.width > 0;
 
-    const PageComponent = hasArtist ? CalendarConnector : NoArtist;
-
     return (
       <PageContent title="Calendar">
         <PageToolbar>
@@ -133,6 +134,11 @@ class CalendarPage extends Component {
           className={styles.calendarPageBody}
           innerClassName={styles.calendarInnerPageBody}
         >
+          {
+            artistIsFetching && !artistIsPopulated &&
+              <LoadingIndicator />
+          }
+
           {
             artistError &&
               <div className={styles.errorMessage}>
@@ -141,14 +147,14 @@ class CalendarPage extends Component {
           }
 
           {
-            !artistError &&
+            !artistError && artistIsPopulated && hasArtist &&
               <Measure
                 whitelist={['width']}
                 onMeasure={this.onMeasure}
               >
                 {
                   isMeasured ?
-                    <PageComponent
+                    <CalendarConnector
                       useCurrentPage={useCurrentPage}
                     /> :
                     <div />
@@ -156,6 +162,11 @@ class CalendarPage extends Component {
               </Measure>
           }
 
+          {
+            !artistError && artistIsPopulated && !hasArtist &&
+              <NoArtist />
+          }
+
           {
             hasArtist && !!artistError &&
               <LegendConnector />
@@ -182,6 +193,8 @@ CalendarPage.propTypes = {
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   hasArtist: PropTypes.bool.isRequired,
   artistError: PropTypes.object,
+  artistIsFetching: PropTypes.bool.isRequired,
+  artistIsPopulated: PropTypes.bool.isRequired,
   missingAlbumIds: PropTypes.arrayOf(PropTypes.number).isRequired,
   isSearchingForMissing: PropTypes.bool.isRequired,
   useCurrentPage: PropTypes.bool.isRequired,

frontend/src/Calendar/CalendarPageConnector.js

@@ -74,6 +74,8 @@ function createMapStateToProps() {
         colorImpairedMode: uiSettings.enableColorImpairedMode,
         hasArtist: !!artistCount.count,
         artistError: artistCount.error,
+        artistIsFetching: artistCount.isFetching,
+        artistIsPopulated: artistCount.isPopulated,
         missingAlbumIds,
         isSearchingForMissing
       };

frontend/src/Store/Selectors/createArtistCountSelector.js

@@ -5,10 +5,14 @@ function createArtistCountSelector() {
   return createSelector(
     createAllArtistSelector(),
     (state) => state.artist.error,
-    (artists, error) => {
+    (state) => state.artist.isFetching,
+    (state) => state.artist.isPopulated,
+    (artists, error, isFetching, isPopulated) => {
       return {
         count: artists.length,
-        error
+        error,
+        isFetching,
+        isPopulated
       };
     }
   );