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,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>
); );