Stop showing loader forever when there are no entries (#343)

src/containers/CollectionPage.css

@@ -0,0 +1,10 @@
+.noEntries {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: 0px;
+  text-align: center;
+  z-index: 1000;
+  transform: translateX(-50%) translateY(-50%);
+  margin-top: 28px;
+}

src/containers/CollectionPage.js

@@ -5,6 +5,7 @@ import { loadEntries } from '../actions/entries';
 import { selectEntries } from '../reducers';
 import { Loader } from '../components/UI';
 import EntryListing from '../components/EntryListing/EntryListing';
+import styles from "./CollectionPage.css";
 
 class CollectionPage extends React.Component {
 
@@ -15,6 +16,7 @@ class CollectionPage extends React.Component {
     dispatch: PropTypes.func.isRequired,
     page: PropTypes.number,
     entries: ImmutablePropTypes.list,
+    isFetching: PropTypes.bool.isRequired,
   };
 
   componentDidMount() {
@@ -37,13 +39,12 @@ class CollectionPage extends React.Component {
   };
 
   render() {
-    const { collections, collection, publicFolder, page, entries } = this.props;
+    const { collections, collection, publicFolder, page, entries, isFetching } = this.props;
     if (collections == null) {
       return <h1>No collections defined in your config.yml</h1>;
     }
-    return (<div>
-      {entries ?
-        <EntryListing
+
+    const entriesContent = (<EntryListing
       collections={collection}
       entries={entries}
       publicFolder={publicFolder}
@@ -51,11 +52,15 @@ class CollectionPage extends React.Component {
       onPaginate={this.handleLoadMore}
     >
       {collection.get('label')}
-        </EntryListing>
-        :
-        <Loader active>{['Loading Entries', 'Caching Entries', 'This might take several minutes']}</Loader>
-      }
-    </div>);
+    </EntryListing>);
+
+    const fetchingEntriesContent = (<Loader active>
+        {['Loading Entries', 'Caching Entries', 'This might take several minutes']}
+    </Loader>);
+    const noEntriesContent = <div className={styles.noEntries}>No Entries</div>;
+    const fallbackContent = isFetching ? fetchingEntriesContent : noEntriesContent;
+
+    return (<div>{entries ? entriesContent : fallbackContent}</div>);
   }
 }
 
@@ -68,8 +73,9 @@ function mapStateToProps(state, ownProps) {
   const page = state.entries.getIn(['pages', collection.get('name'), 'page']);
 
   const entries = selectEntries(state, collection.get('name'));
+  const isFetching = state.entries.getIn(['pages', collection.get('name'), 'isFetching'], false);
 
-  return { slug, publicFolder, collection, collections, page, entries };
+  return { slug, publicFolder, collection, collections, page, entries, isFetching };
 }
 
 export default connect(mapStateToProps)(CollectionPage);

src/reducers/entries.js

@@ -5,6 +5,7 @@ import {
   ENTRY_FAILURE,
   ENTRIES_REQUEST,
   ENTRIES_SUCCESS,
+  ENTRIES_FAILURE,
 } from '../actions/entries';
 
 import { SEARCH_ENTRIES_SUCCESS } from '../actions/search';
@@ -43,6 +44,9 @@ const entries = (state = Map({ entities: Map(), pages: Map() }), action) => {
         }));
       });
 
+    case ENTRIES_FAILURE:
+      return state.setIn(['pages', action.meta.collection, 'isFetching'], false);
+
     case ENTRY_FAILURE:
       return state.withMutations((map) => {
         map.setIn(['entities', `${ action.payload.collection }.${ action.payload.slug }`, 'isFetching'], false);