Show headers while loading
& show spinner whilst waiting for filter requests
This commit is contained in:
parent
a11516a984
commit
2b6fbb038a
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue