From 26393742435b780ad68f3814c688551b841555bb Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Thu, 25 Jun 2020 21:53:34 -0400
Subject: [PATCH] Fixed: Don't Show NoArtist on Calendar if Artists are Loading

---
 frontend/src/Calendar/CalendarPage.js         | 21 +++++++++++++++----
 .../src/Calendar/CalendarPageConnector.js     |  2 ++
 .../Selectors/createArtistCountSelector.js    |  8 +++++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Calendar/CalendarPage.js b/frontend/src/Calendar/CalendarPage.js
index b23436241..293d965e8 100644
--- a/frontend/src/Calendar/CalendarPage.js
+++ b/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,
diff --git a/frontend/src/Calendar/CalendarPageConnector.js b/frontend/src/Calendar/CalendarPageConnector.js
index db0f827c1..7b1c0f10e 100644
--- a/frontend/src/Calendar/CalendarPageConnector.js
+++ b/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
       };
diff --git a/frontend/src/Store/Selectors/createArtistCountSelector.js b/frontend/src/Store/Selectors/createArtistCountSelector.js
index 203a5cb94..31e0a39fc 100644
--- a/frontend/src/Store/Selectors/createArtistCountSelector.js
+++ b/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
       };
     }
   );