add loading state to feeds

1 files changed, 6 insertions, 5 deletions

diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js
index b5ca24b6..997ac642 100644
--- a/vnext/src/components/Feeds.js
+++ b/vnext/src/components/Feeds.js
@@ -61,7 +61,8 @@ class Feed extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      msgs: []
+      msgs: [],
+      loading: false
     };
   }
   componentDidMount() {
@@ -76,7 +77,7 @@ class Feed extends React.Component {
   loadMessages = (hash = '', filter = '') => {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
-    this.setState({ msgs: [] })
+    this.setState({ msgs: [], loading: true })
     const filterParams = qs.parse(filter);
     let params = Object.assign({}, filterParams || {}, this.props.query.search || {});
     let url = this.props.query.baseUrl;
@@ -95,9 +96,9 @@ class Feed extends React.Component {
         let newFilter = Object.assign({}, filterParams);
         newFilter[pageParam] = pageValue;
         const nextpage = `?${qs.stringify(newFilter)}`;
-        this.setState({ msgs: data, nextpage: nextpage })
+        this.setState({ msgs: data, loading: false, nextpage: nextpage })
       }).catch(ex => {
-        console.log(ex);
+        this.setState({ error: true })
       });
   }
 
@@ -129,7 +130,7 @@ class Feed extends React.Component {
     );
     return this.state.msgs.length > 0 ? (
       <div className="msgs" id="content">{nodes}</div>
-    ) : <div className="msgs" id="content"><Spinner /><Spinner /><Spinner /><Spinner /></div>;
+    ) : this.state.error ? <div>error</div> : this.state.loading ? <div className="msgs" id="content"><Spinner /><Spinner /><Spinner /><Spinner /></div> : <div>No more messages</div>;
   }
 }