aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-28 12:10:59 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:53 +0300
commitc6fd95c44d672a9ec358a312d03cf061f8cf7704 (patch)
treedda7b05dfa37fdcf8f29dfcb31e152a30b3e088a /vnext/src/components
parentf91cd67ad5ed0e10e95e58e8cf50e2e0457b4596 (diff)
add loading state to feeds
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Feeds.js11
-rw-r--r--vnext/src/components/Thread.js9
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) => (