Show headers while loading

& show spinner whilst waiting for filter requests
This commit is contained in:
David Baker 2016-09-16 18:41:29 +01:00
parent a11516a984
commit 2b6fbb038a
1 changed files with 22 additions and 20 deletions

View File

@ -98,6 +98,7 @@ module.exports = React.createClass({
const opts = {limit: 20}; const opts = {limit: 20};
if (this.nextBatch) opts.since = this.nextBatch; if (this.nextBatch) opts.since = this.nextBatch;
if (this.filterString) opts.filter = { generic_search_term: this.filterString } ; if (this.filterString) opts.filter = { generic_search_term: this.filterString } ;
this.setState({loading: true});
return MatrixClientPeg.get().publicRooms(opts).then((data) => { return MatrixClientPeg.get().publicRooms(opts).then((data) => {
this.nextBatch = data.next_batch; this.nextBatch = data.next_batch;
this.setState((s) => { this.setState((s) => {
@ -327,18 +328,31 @@ module.exports = React.createClass({
}, },
render: function() { render: function() {
let content;
if (this.state.loading) { if (this.state.loading) {
var Loader = sdk.getComponent("elements.Spinner"); const Loader = sdk.getComponent("elements.Spinner");
return ( content = <div className="mx_RoomDirectory">
<div className="mx_RoomDirectory"> <Loader />
<Loader /> </div>;
</div> } else {
); const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
content = <ScrollPanel
className="mx_RoomDirectory_tableWrapper"
onFillRequest={ this.onFillRequest }
stickyBottom={false}
startAtBottom={false}
onResize={function(){}}
>
<table ref="directory_table" className="mx_RoomDirectory_table">
<tbody>
{ this.getRows() }
</tbody>
</table>
</ScrollPanel>;
} }
const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader'); const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown'); const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
return ( return (
<div className="mx_RoomDirectory"> <div className="mx_RoomDirectory">
<SimpleRoomHeader title="Directory" /> <SimpleRoomHeader title="Directory" />
@ -349,19 +363,7 @@ module.exports = React.createClass({
/> />
<NetworkDropdown config={this.props.config} onNetworkChange={this.onNetworkChange} /> <NetworkDropdown config={this.props.config} onNetworkChange={this.onNetworkChange} />
</div> </div>
<ScrollPanel {content}
className="mx_RoomDirectory_tableWrapper"
onFillRequest={ this.onFillRequest }
stickyBottom={false}
startAtBottom={false}
onResize={function(){}}
>
<table ref="directory_table" className="mx_RoomDirectory_table">
<tbody>
{ this.getRows() }
</tbody>
</table>
</ScrollPanel>
</div> </div>
</div> </div>
); );