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