Fixed: Don't show NoAuthor on calendar if authors 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 NoAuthor from 'Author/NoAuthor';
 import CalendarLinkModal from './iCal/CalendarLinkModal';
 import CalendarOptionsModal from './Options/CalendarOptionsModal';
@@ -77,6 +78,8 @@ class CalendarPage extends Component {
       filters,
       hasAuthor,
       authorError,
+      authorIsFetching,
+      authorIsPopulated,
       missingBookIds,
       isSearchingForMissing,
       useCurrentPage,
@@ -90,8 +93,6 @@ class CalendarPage extends Component {
 
     const isMeasured = this.state.width > 0;
 
-    const PageComponent = hasAuthor ? CalendarConnector : NoAuthor;
-
     return (
       <PageContent title="Calendar">
         <PageToolbar>
@@ -133,6 +134,11 @@ class CalendarPage extends Component {
           className={styles.calendarPageBody}
           innerClassName={styles.calendarInnerPageBody}
         >
+          {
+            authorIsFetching && !authorIsPopulated &&
+              <LoadingIndicator />
+          }
+
           {
             authorError &&
               <div className={styles.errorMessage}>
@@ -141,14 +147,14 @@ class CalendarPage extends Component {
           }
 
           {
-            !authorError &&
+            !authorError && authorIsPopulated && hasAuthor &&
               <Measure
                 whitelist={['width']}
                 onMeasure={this.onMeasure}
               >
                 {
                   isMeasured ?
-                    <PageComponent
+                    <CalendarConnector
                       useCurrentPage={useCurrentPage}
                     /> :
                     <div />
@@ -156,6 +162,11 @@ class CalendarPage extends Component {
               </Measure>
           }
 
+          {
+            !authorError && authorIsPopulated && !hasAuthor &&
+              <NoAuthor />
+          }
+
           {
             hasAuthor && !!authorError &&
               <LegendConnector />
@@ -182,6 +193,8 @@ CalendarPage.propTypes = {
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   hasAuthor: PropTypes.bool.isRequired,
   authorError: PropTypes.object,
+  authorIsFetching: PropTypes.bool.isRequired,
+  authorIsPopulated: PropTypes.bool.isRequired,
   missingBookIds: 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,
         hasAuthor: !!authorCount.count,
         authorError: authorCount.error,
+        authorIsFetching: authorCount.isFetching,
+        authorIsPopulated: authorCount.isPopulated,
         missingBookIds,
         isSearchingForMissing
       };

frontend/src/Store/Selectors/createAuthorCountSelector.js

@@ -5,10 +5,14 @@ function createAuthorCountSelector() {
   return createSelector(
     createAllAuthorsSelector(),
     (state) => state.authors.error,
-    (authors, error) => {
+    (state) => state.authors.isFetching,
+    (state) => state.authors.isPopulated,
+    (authors, error, isFetching, isPopulated) => {
       return {
         count: authors.length,
-        error
+        error,
+        isFetching,
+        isPopulated
       };
     }
   );