Fixed: Don't Show NoMovie on Cal if Movies are Loading

Fixes #4499

frontend/src/Calendar/CalendarPage.js

@@ -10,6 +10,7 @@ import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import FilterMenu from 'Components/Menu/FilterMenu';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import NoMovie from 'Movie/NoMovie';
 import CalendarLinkModal from './iCal/CalendarLinkModal';
 import CalendarOptionsModal from './Options/CalendarOptionsModal';
@@ -78,6 +79,8 @@ class CalendarPage extends Component {
       filters,
       hasMovie,
       movieError,
+      movieIsFetching,
+      movieIsPopulated,
       missingMovieIds,
       isRssSyncExecuting,
       isSearchingForMissing,
@@ -92,7 +95,6 @@ class CalendarPage extends Component {
     } = this.state;
 
     const isMeasured = this.state.width > 0;
-    const PageComponent = hasMovie ? CalendarConnector : NoMovie;
 
     return (
       <PageContent title="Calendar">
@@ -144,6 +146,11 @@ class CalendarPage extends Component {
           className={styles.calendarPageBody}
           innerClassName={styles.calendarInnerPageBody}
         >
+          {
+            movieIsFetching && !movieIsPopulated &&
+              <LoadingIndicator />
+          }
+
           {
             movieError &&
               <div className={styles.errorMessage}>
@@ -152,14 +159,14 @@ class CalendarPage extends Component {
           }
 
           {
-            !movieError &&
+            !movieError && movieIsPopulated && hasMovie &&
               <Measure
                 whitelist={['width']}
                 onMeasure={this.onMeasure}
               >
                 {
                   isMeasured ?
-                    <PageComponent
+                    <CalendarConnector
                       useCurrentPage={useCurrentPage}
                     /> :
                     <div />
@@ -167,6 +174,11 @@ class CalendarPage extends Component {
               </Measure>
           }
 
+          {
+            !movieError && movieIsPopulated && !hasMovie &&
+              <NoMovie />
+          }
+
           {
             hasMovie && !movieError &&
               <LegendConnector />
@@ -192,6 +204,8 @@ CalendarPage.propTypes = {
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   hasMovie: PropTypes.bool.isRequired,
   movieError: PropTypes.object,
+  movieIsFetching: PropTypes.bool.isRequired,
+  movieIsPopulated: PropTypes.bool.isRequired,
   missingMovieIds: PropTypes.arrayOf(PropTypes.number).isRequired,
   isRssSyncExecuting: PropTypes.bool.isRequired,
   isSearchingForMissing: PropTypes.bool.isRequired,

frontend/src/Calendar/CalendarPageConnector.js

@@ -79,6 +79,8 @@ function createMapStateToProps() {
         colorImpairedMode: uiSettings.enableColorImpairedMode,
         hasMovie: !!movieCount.count,
         movieError: movieCount.error,
+        movieIsFetching: movieCount.isFetching,
+        movieIsPopulated: movieCount.isPopulated,
         missingMovieIds,
         isRssSyncExecuting,
         isSearchingForMissing

frontend/src/Store/Selectors/createMovieCountSelector.js

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