Lazy-load the user list to improve perf

Still slow when typing due to adding 1000 tiles to the DOM, but it is at least
a lot better than before (which would stutter on ANY change to the member list)
This commit is contained in:
Kegan Dougal 2016-01-20 14:14:04 +00:00
parent 91c224aaf4
commit 391c653d24
3 changed files with 19 additions and 9 deletions

View file

@ -121,7 +121,7 @@ module.exports = React.createClass({
var MemberAvatar = sdk.getComponent('avatars.MemberAvatar'); var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
var BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
var av = this.props.avatarJsx || <BaseAvatar name={name} width={36} height={36} />; var av = this.props.avatarJsx || <BaseAvatar name={this.props.name} width={36} height={36} />;
return ( return (
<div className={mainClassName} title={ this.props.title } <div className={mainClassName} title={ this.props.title }

View file

@ -71,8 +71,19 @@ module.exports = React.createClass({
self.setState({ self.setState({
members: self.roomMembers() members: self.roomMembers()
}); });
// Lazy-load the complete user list for inviting new users
// TODO: Keep this list bleeding-edge up-to-date. Practically speaking,
// it will do for now not being updated as random new users join different
// rooms as this list will be reloaded every room swap.
var room = MatrixClientPeg.get().getRoom(self.props.roomId);
self.userList = MatrixClientPeg.get().getUsers().filter(function(u) {
return !room.hasMembershipState(u.userId, "join");
});
}, 50); }, 50);
setTimeout
// Attach a SINGLE listener for global presence changes then locate the // Attach a SINGLE listener for global presence changes then locate the
// member tile and re-render it. This is more efficient than every tile // member tile and re-render it. This is more efficient than every tile
// evar attaching their own listener. // evar attaching their own listener.
@ -323,20 +334,13 @@ module.exports = React.createClass({
<Loader /> <Loader />
); );
} else { } else {
// TODO: Cache this calculation
var room = MatrixClientPeg.get().getRoom(this.props.roomId);
/* var allUsers = MatrixClientPeg.get().getUsers();
// only add Users if they are not joined
allUsers = allUsers.filter(function(u) {
return !room.hasMembershipState(u.userId, "join");
}); */
var SearchableEntityList = sdk.getComponent("rooms.SearchableEntityList"); var SearchableEntityList = sdk.getComponent("rooms.SearchableEntityList");
return ( return (
<SearchableEntityList searchPlaceholderText={"Invite / Search"} <SearchableEntityList searchPlaceholderText={"Invite / Search"}
onSubmit={this.onInvite} onSubmit={this.onInvite}
onQueryChanged={this.onSearchQueryChanged} onQueryChanged={this.onSearchQueryChanged}
entities={[] /* Entities.fromUsers(allUsers, true, this.onInvite) */} /> entities={Entities.fromUsers(this.userList || [], true, this.onInvite)} />
); );
} }
}, },

View file

@ -50,6 +50,12 @@ var SearchableEntityList = React.createClass({
}; };
}, },
componentWillUnmount: function() {
// pretend the query box was blanked out else filters could still be
// applied to other components which rely on onQueryChanged.
this.props.onQueryChanged("");
},
/** /**
* Public-facing method to set the input query text to the given input. * Public-facing method to set the input query text to the given input.
* @param {string} input * @param {string} input