diff --git a/frontend/src/Calendar/CalendarPage.js b/frontend/src/Calendar/CalendarPage.js index ed05588bc..bb655fd5b 100644 --- a/frontend/src/Calendar/CalendarPage.js +++ b/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 ( @@ -144,6 +146,11 @@ class CalendarPage extends Component { className={styles.calendarPageBody} innerClassName={styles.calendarInnerPageBody} > + { + movieIsFetching && !movieIsPopulated && + + } + { movieError &&
@@ -152,14 +159,14 @@ class CalendarPage extends Component { } { - !movieError && + !movieError && movieIsPopulated && hasMovie && { isMeasured ? - :
@@ -167,6 +174,11 @@ class CalendarPage extends Component { } + { + !movieError && movieIsPopulated && !hasMovie && + + } + { hasMovie && !movieError && @@ -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, diff --git a/frontend/src/Calendar/CalendarPageConnector.js b/frontend/src/Calendar/CalendarPageConnector.js index 0456217c1..e91e7c85e 100644 --- a/frontend/src/Calendar/CalendarPageConnector.js +++ b/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 diff --git a/frontend/src/Store/Selectors/createMovieCountSelector.js b/frontend/src/Store/Selectors/createMovieCountSelector.js index aa87d792e..17d04afa2 100644 --- a/frontend/src/Store/Selectors/createMovieCountSelector.js +++ b/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 }; } );