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};
|
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,29 +328,15 @@ 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 SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
|
|
||||||
const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
|
|
||||||
const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
|
const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
|
||||||
return (
|
content = <ScrollPanel
|
||||||
<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
|
|
||||||
className="mx_RoomDirectory_tableWrapper"
|
className="mx_RoomDirectory_tableWrapper"
|
||||||
onFillRequest={ this.onFillRequest }
|
onFillRequest={ this.onFillRequest }
|
||||||
stickyBottom={false}
|
stickyBottom={false}
|
||||||
|
@ -361,7 +348,22 @@ module.exports = React.createClass({
|
||||||
{ this.getRows() }
|
{ this.getRows() }
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue