From fec7d2ee5fcbb5353d06bd5ac6fb3e0d6361afba Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 7 Sep 2018 12:00:19 +0200 Subject: [PATCH 1/4] avoid updating the memberlist while the spinner is shown the memberlist gets updated constantly while the LL members are being added to the room state. this slows things down unneed, and is one of the main cause of dropping frames when member arrive. --- src/components/views/rooms/MemberList.js | 29 ++++++++++++++++-------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js index d302bee832..5861348d98 100644 --- a/src/components/views/rooms/MemberList.js +++ b/src/components/views/rooms/MemberList.js @@ -33,6 +33,7 @@ module.exports = React.createClass({ getInitialState: function() { this.memberDict = this.getMemberDict(); + this._mounted = false; const cli = MatrixClientPeg.get(); if (cli.hasLazyLoadMembersEnabled()) { @@ -43,6 +44,19 @@ module.exports = React.createClass({ }, componentWillMount: function() { + const cli = MatrixClientPeg.get(); + if (!cli.hasLazyLoadMembersEnabled()) { + this._listenForMembersChanges(); + } + const enablePresenceByHsUrl = SdkConfig.get()["enable_presence_by_hs_url"]; + const hsUrl = MatrixClientPeg.get().baseUrl; + this._showPresence = true; + if (enablePresenceByHsUrl && enablePresenceByHsUrl[hsUrl] !== undefined) { + this._showPresence = enablePresenceByHsUrl[hsUrl]; + } + }, + + _listenForMembersChanges: function() { const cli = MatrixClientPeg.get(); cli.on("RoomState.members", this.onRoomStateMember); cli.on("RoomMember.name", this.onRoomMemberName); @@ -53,25 +67,22 @@ module.exports = React.createClass({ // the information contained in presence events). cli.on("User.lastPresenceTs", this.onUserLastPresenceTs); // cli.on("Room.timeline", this.onRoomTimeline); - - const enablePresenceByHsUrl = SdkConfig.get()["enable_presence_by_hs_url"]; - const hsUrl = MatrixClientPeg.get().baseUrl; - - this._showPresence = true; - if (enablePresenceByHsUrl && enablePresenceByHsUrl[hsUrl] !== undefined) { - this._showPresence = enablePresenceByHsUrl[hsUrl]; - } }, componentDidMount: async function() { + this._mounted = true; const cli = MatrixClientPeg.get(); if (cli.hasLazyLoadMembersEnabled()) { await this._waitForMembersToLoad(); - this.setState(this._getMembersState()); + if (this._mounted) { + this.setState(this._getMembersState()); + this._listenForMembersChanges(); + } } }, componentWillUnmount: function() { + this._mounted = false; const cli = MatrixClientPeg.get(); if (cli) { cli.removeListener("RoomState.members", this.onRoomStateMember); From 0cd222ef0be30a7842ac02c29acddc71a745c989 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 7 Sep 2018 23:44:20 +0200 Subject: [PATCH 2/4] make users available in member by requesting them from client right before before this was already foreseen, but memberDict wasn't being refreshed as it's only used in roomMembers(), I got rid of memberDict as well --- src/components/views/rooms/MemberList.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js index 6ef448f0fd..87758fa922 100644 --- a/src/components/views/rooms/MemberList.js +++ b/src/components/views/rooms/MemberList.js @@ -32,7 +32,6 @@ module.exports = React.createClass({ displayName: 'MemberList', getInitialState: function() { - this.memberDict = this.getMemberDict(); this._mounted = false; const cli = MatrixClientPeg.get(); @@ -196,8 +195,6 @@ module.exports = React.createClass({ _updateList: new rate_limited_func(function() { // console.log("Updating memberlist"); - this.memberDict = this.getMemberDict(); - const newState = { members: this.roomMembers(), }; @@ -206,15 +203,15 @@ module.exports = React.createClass({ this.setState(newState); }, 500), - getMemberDict: function() { - if (!this.props.roomId) return {}; + getMembersWithUser: function() { + if (!this.props.roomId) return []; const cli = MatrixClientPeg.get(); const room = cli.getRoom(this.props.roomId); if (!room) return {}; - const all_members = room.currentState.members; + const allMembers = Object.values(room.currentState.members); - Object.values(all_members).forEach(function(member) { + allMembers.forEach(function(member) { // work around a race where you might have a room member object // before the user object exists. This may or may not cause // https://github.com/vector-im/vector-web/issues/186 @@ -226,14 +223,13 @@ module.exports = React.createClass({ // the right solution here is to fix the race rather than leave it as 0 }); - return all_members; + return allMembers; }, roomMembers: function() { const ConferenceHandler = CallHandler.getConferenceHandler(); - const allMembersDict = this.memberDict || {}; - const allMembers = Object.values(allMembersDict); + const allMembers = this.getMembersWithUser(); const filteredAndSortedMembers = allMembers.filter((m) => { return ( m.membership === 'join' || m.membership === 'invite' From 92f7e29132136992c92f21bbaa4035e0f609a939 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 10 Sep 2018 17:32:40 +0200 Subject: [PATCH 3/4] missed one {} -> [], fix e2e tests --- src/components/views/rooms/MemberList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js index 87758fa922..3672196506 100644 --- a/src/components/views/rooms/MemberList.js +++ b/src/components/views/rooms/MemberList.js @@ -207,7 +207,7 @@ module.exports = React.createClass({ if (!this.props.roomId) return []; const cli = MatrixClientPeg.get(); const room = cli.getRoom(this.props.roomId); - if (!room) return {}; + if (!room) return []; const allMembers = Object.values(room.currentState.members); From 2aaf3e6b89ce9d7a781baf1acc4720603caded17 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 10 Sep 2018 17:39:03 +0200 Subject: [PATCH 4/4] dont assign member in getInitialState --- src/components/views/rooms/MemberList.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js index 3672196506..4a22df8451 100644 --- a/src/components/views/rooms/MemberList.js +++ b/src/components/views/rooms/MemberList.js @@ -32,8 +32,6 @@ module.exports = React.createClass({ displayName: 'MemberList', getInitialState: function() { - this._mounted = false; - const cli = MatrixClientPeg.get(); if (cli.hasLazyLoadMembersEnabled()) { return {loading: true}; @@ -43,6 +41,7 @@ module.exports = React.createClass({ }, componentWillMount: function() { + this._mounted = false; const cli = MatrixClientPeg.get(); if (!cli.hasLazyLoadMembersEnabled()) { this._listenForMembersChanges();