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:
parent
91c224aaf4
commit
391c653d24
3 changed files with 19 additions and 9 deletions
|
@ -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 }
|
||||||
|
|
|
@ -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)} />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue