diff options
author | 2018-06-28 12:10:59 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:53 +0300 | |
commit | c6fd95c44d672a9ec358a312d03cf061f8cf7704 (patch) | |
tree | dda7b05dfa37fdcf8f29dfcb31e152a30b3e088a /vnext/src/components | |
parent | f91cd67ad5ed0e10e95e58e8cf50e2e0457b4596 (diff) |
add loading state to feeds
Diffstat (limited to 'vnext/src/components')
-rw-r--r-- | vnext/src/components/Feeds.js | 11 | ||||
-rw-r--r-- | vnext/src/components/Thread.js | 9 |
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) => ( |