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};
if (this.nextBatch) opts.since = this.nextBatch;
if (this.filterString) opts.filter = { generic_search_term: this.filterString } ;
this.setState({loading: true});
return MatrixClientPeg.get().publicRooms(opts).then((data) => {
this.nextBatch = data.next_batch;
this.setState((s) => {
@ -327,29 +328,15 @@ module.exports = React.createClass({
},
render: function() {
let content;
if (this.state.loading) {
var Loader = sdk.getComponent("elements.Spinner");
return (
<div className="mx_RoomDirectory">
const Loader = sdk.getComponent("elements.Spinner");
content = <div className="mx_RoomDirectory">
<Loader />
</div>
);
}
const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
</div>;
} else {
const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
return (
<div className="mx_RoomDirectory">
<SimpleRoomHeader title="Directory" />
<div className="mx_RoomDirectory_list">
<div className="mx_RoomDirectory_listheader">
<input type="text" placeholder="Find a room by keyword or room ID (#foo:matrix.org)"
className="mx_RoomDirectory_input" size="64" onChange={this.onFilterChange}
/>
<NetworkDropdown config={this.props.config} onNetworkChange={this.onNetworkChange} />
</div>
<ScrollPanel
content = <ScrollPanel
className="mx_RoomDirectory_tableWrapper"
onFillRequest={ this.onFillRequest }
stickyBottom={false}
@ -361,7 +348,22 @@ module.exports = React.createClass({
{ this.getRows() }
</tbody>
</table>
</ScrollPanel>
</ScrollPanel>;
}
const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
return (
<div className="mx_RoomDirectory">
<SimpleRoomHeader title="Directory" />
<div className="mx_RoomDirectory_list">
<div className="mx_RoomDirectory_listheader">
<input type="text" placeholder="Find a room by keyword or room ID (#foo:matrix.org)"
className="mx_RoomDirectory_input" size="64" onChange={this.onFilterChange}
/>
<NetworkDropdown config={this.props.config} onNetworkChange={this.onNetworkChange} />
</div>
{content}
</div>
</div>
);