diff --git a/web/app/components/root/root.jsx b/web/app/components/root/root.jsx index 473cf4fa..d3bf1197 100644 --- a/web/app/components/root/root.jsx +++ b/web/app/components/root/root.jsx @@ -27,7 +27,8 @@ export default class Root extends Component { } this.state = { - loaded: false, + isLoaded: false, + isCommentsListLoading: false, user: {}, replyingCommentId: null, sort, @@ -56,12 +57,17 @@ export default class Root extends Component { .then(data => store.set('user', data)) .catch(() => store.set('user', {})) .finally(() => { + this.setState({ + isLoaded: true, + isCommentsListLoading: true, + }); + api.find({ sort, url }) .then(({ comments = [] } = {}) => store.set('comments', comments)) .catch(() => store.set('comments', [])) .finally(() => { this.setState({ - loaded: true, + isCommentsListLoading: false, user: store.get('user'), }); @@ -149,7 +155,7 @@ export default class Root extends Component { onSortChange(sort) { if (sort === this.state.sort) return; - this.setState({ sort }); + this.setState({ sort, isCommentsListLoading: true }); try { localStorage.setItem(LS_SORT_KEY, sort); @@ -157,7 +163,11 @@ export default class Root extends Component { // can't save; ignore it } - api.find({ sort, url }).then(({ comments } = {}) => store.set('comments', comments)); + api.find({ sort, url }) + .then(({ comments } = {}) => store.set('comments', comments)) + .finally(() => { + this.setState({ isCommentsListLoading: false }); + }); } onUnblockSomeone() { @@ -175,8 +185,8 @@ export default class Root extends Component { }); } - render({}, { config = {}, comments = [], user, sort, loaded, isBlockedVisible, bannedUsers, replyingCommentId }) { - if (!loaded) { + render({}, { config = {}, comments = [], user, sort, isLoaded, isBlockedVisible, isCommentsListLoading, bannedUsers, replyingCommentId }) { + if (!isLoaded) { return (
@@ -233,7 +243,7 @@ export default class Root extends Component { } { - !!comments.length && ( + !!comments.length && !isCommentsListLoading && (
{ comments.map(thread => ( @@ -249,6 +259,14 @@ export default class Root extends Component {
) } + + { + isCommentsListLoading && ( +
+ +
+ ) + }
) }