Merge pull request #3424 from matrix-org/dbkr/room_directory_pagination_spinner_2

RoomDirectory: show spinner if loading more results
This commit is contained in:
David Baker 2019-09-12 12:16:10 +01:00 committed by GitHub
commit 6dd0ad6e27
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1,6 +1,7 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -141,6 +142,10 @@ module.exports = React.createClass({
getMoreRooms: function() { getMoreRooms: function() {
if (!MatrixClientPeg.get()) return Promise.resolve(); if (!MatrixClientPeg.get()) return Promise.resolve();
this.setState({
loading: true,
});
const my_filter_string = this.state.filterString; const my_filter_string = this.state.filterString;
const my_server = this.state.roomServer; const my_server = this.state.roomServer;
// remember the next batch token when we sent the request // remember the next batch token when we sent the request
@ -555,15 +560,21 @@ module.exports = React.createClass({
let content; let content;
if (this.state.error) { if (this.state.error) {
content = this.state.error; content = this.state.error;
} else if (this.state.protocolsLoading || this.state.loading) { } else if (this.state.protocolsLoading) {
content = <Loader />; content = <Loader />;
} else { } else {
const rows = (this.state.publicRooms || []).map(room => this.getRow(room)); const rows = (this.state.publicRooms || []).map(room => this.getRow(room));
// we still show the scrollpanel, at least for now, because // we still show the scrollpanel, at least for now, because
// otherwise we don't fetch more because we don't get a fill // otherwise we don't fetch more because we don't get a fill
// request from the scrollpanel because there isn't one // request from the scrollpanel because there isn't one
let spinner;
if (this.state.loading) {
spinner = <Loader />;
}
let scrollpanel_content; let scrollpanel_content;
if (rows.length == 0) { if (rows.length === 0 && !this.state.loading) {
scrollpanel_content = <i>{ _t('No rooms to show') }</i>; scrollpanel_content = <i>{ _t('No rooms to show') }</i>;
} else { } else {
scrollpanel_content = <table ref="directory_table" className="mx_RoomDirectory_table"> scrollpanel_content = <table ref="directory_table" className="mx_RoomDirectory_table">
@ -580,6 +591,7 @@ module.exports = React.createClass({
startAtBottom={false} startAtBottom={false}
> >
{ scrollpanel_content } { scrollpanel_content }
{ spinner }
</ScrollPanel>; </ScrollPanel>;
} }