add loading state to feeds

2 files changed, 10 insertions, 10 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>;
   }
 }
 
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index df3f460a..9ef5c5b9 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -20,6 +20,7 @@ export default class Thread extends React.Component {
     this.state = {
       msg: msg || {},
       replies: [],
+      loading: false,
       active: 0
     };
   }
@@ -29,7 +30,7 @@ export default class Thread extends React.Component {
     this.loadReplies();
   }
   loadReplies() {
-    this.setState({ replies: [] })
+    this.setState({ replies: [], loading: true })
     const { mid } = this.props.match.params;
     let params = {
       mid: mid
@@ -43,6 +44,7 @@ export default class Thread extends React.Component {
         this.setState({
           msg: msg,
           replies: response.data,
+          loading: false,
           active: 0
         })
       }
@@ -50,9 +52,6 @@ export default class Thread extends React.Component {
         console.log(ex);
       });
   }
-  loaded = () => {
-    return (this.state.replies && this.state.replies.length > 0) || ('mid' in this.state.msg && !('replies' in this.state.msg));
-  }
   setActive(msg, event) {
     this.setState({
       active: msg.rid || 0
@@ -93,7 +92,7 @@ export default class Thread extends React.Component {
                 <h2>{msg.replies && `Replies (${msg.replies})`}</h2>
               </div>
             }
-            {this.loaded() ? (
+            {!this.state.loading ? (
               <ul id="replies">
                 {
                   this.state.replies.map((msg) => (