From d503547883b74110c18666d90f844ff21245d32f Mon Sep 17 00:00:00 2001
From: Benaiah Mischenko <benaiah@mischenko.com>
Date: Fri, 7 Apr 2017 09:32:30 -0700
Subject: [PATCH] Stop showing loader forever when there are no entries (#343)

---
 src/containers/CollectionPage.css | 10 ++++++++
 src/containers/CollectionPage.js  | 40 ++++++++++++++++++-------------
 src/reducers/entries.js           |  6 ++++-
 3 files changed, 38 insertions(+), 18 deletions(-)
 create mode 100644 src/containers/CollectionPage.css

diff --git a/src/containers/CollectionPage.css b/src/containers/CollectionPage.css
new file mode 100644
index 00000000..e410953f
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/containers/CollectionPage.js b/src/containers/CollectionPage.js
index e406da99..cb331ff8 100644
--- a/src/containers/CollectionPage.js
+++ b/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,25 +39,28 @@ 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
-          collections={collection}
-          entries={entries}
-          publicFolder={publicFolder}
-          page={page}
-          onPaginate={this.handleLoadMore}
-        >
-          {collection.get('label')}
-        </EntryListing>
-        :
-        <Loader active>{['Loading Entries', 'Caching Entries', 'This might take several minutes']}</Loader>
-      }
-    </div>);
+
+    const entriesContent = (<EntryListing
+      collections={collection}
+      entries={entries}
+      publicFolder={publicFolder}
+      page={page}
+      onPaginate={this.handleLoadMore}
+    >
+      {collection.get('label')}
+    </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);
diff --git a/src/reducers/entries.js b/src/reducers/entries.js
index f84125bf..fcc7c441 100644
--- a/src/reducers/entries.js
+++ b/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';
@@ -42,7 +43,10 @@ const entries = (state = Map({ entities: Map(), pages: Map() }), action) => {
           ids: (!page || page === 0) ? ids : map.getIn(['pages', collection, 'ids'], List()).concat(ids),
         }));
       });
-    
+
+    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);