From e9e5abfcc5e8e0337ddab67e8d0371df49c3f281 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 29 Aug 2018 10:30:25 +0200 Subject: [PATCH 1/3] show a spinner in the memberlist while loading the members --- src/components/views/rooms/MemberList.js | 29 ++++++++++++++++++++---- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js index 6f6188e0b5..ff410ce556 100644 --- a/src/components/views/rooms/MemberList.js +++ b/src/components/views/rooms/MemberList.js @@ -35,7 +35,16 @@ module.exports = React.createClass({ this.memberDict = this.getMemberDict(); const members = this.roomMembers(); - return { + return {loading: true}; + }, + + componentDidMount: async function() { + await this._waitForMembersToLoad(); + this.memberDict = this.getMemberDict(); + const members = this.roomMembers(); + + this.setState({ + loading: false, members: members, filteredJoinedMembers: this._filterMembers(members, 'join'), filteredInvitedMembers: this._filterMembers(members, 'invite'), @@ -45,10 +54,8 @@ module.exports = React.createClass({ truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS, truncateAtInvited: INITIAL_LOAD_NUM_INVITED, searchQuery: "", - }; - }, + }); - componentWillMount: function() { const cli = MatrixClientPeg.get(); cli.on("RoomState.members", this.onRoomStateMember); cli.on("RoomMember.name", this.onRoomMemberName); @@ -84,6 +91,15 @@ module.exports = React.createClass({ this._updateList.cancelPendingCall(); }, + _waitForMembersToLoad: async function() { + if (!this.props.roomId) return {}; + const cli = MatrixClientPeg.get(); + const room = cli.getRoom(this.props.roomId); + if (room) { + await room.loadMembersIfNeeded(); + } + }, + /* onRoomTimeline: function(ev, room, toStartOfTimeline, removed, data) { // ignore anything but real-time updates at the end of the room: @@ -393,6 +409,11 @@ module.exports = React.createClass({ }, render: function() { + if (this.state.loading) { + const Spinner = sdk.getComponent("elements.Spinner"); + return
; + } + const TruncatedList = sdk.getComponent("elements.TruncatedList"); const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper"); From f9c40390e95060c1d457bdc7e03c9379bf70d5b7 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 29 Aug 2018 11:09:55 +0200 Subject: [PATCH 2/3] set state after setting _showPresence to avoid all members to appear offline on matrix.org --- src/components/views/rooms/MemberList.js | 27 ++++++++++++------------ 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js index ff410ce556..b418eef121 100644 --- a/src/components/views/rooms/MemberList.js +++ b/src/components/views/rooms/MemberList.js @@ -43,19 +43,6 @@ module.exports = React.createClass({ this.memberDict = this.getMemberDict(); const members = this.roomMembers(); - this.setState({ - loading: false, - members: members, - filteredJoinedMembers: this._filterMembers(members, 'join'), - filteredInvitedMembers: this._filterMembers(members, 'invite'), - - // ideally we'd size this to the page height, but - // in practice I find that a little constraining - truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS, - truncateAtInvited: INITIAL_LOAD_NUM_INVITED, - searchQuery: "", - }); - const cli = MatrixClientPeg.get(); cli.on("RoomState.members", this.onRoomStateMember); cli.on("RoomMember.name", this.onRoomMemberName); @@ -74,6 +61,20 @@ module.exports = React.createClass({ if (enablePresenceByHsUrl && enablePresenceByHsUrl[hsUrl] !== undefined) { this._showPresence = enablePresenceByHsUrl[hsUrl]; } + // set the state after determining _showPresence to make sure it's + // taken into account while rerendering + this.setState({ + loading: false, + members: members, + filteredJoinedMembers: this._filterMembers(members, 'join'), + filteredInvitedMembers: this._filterMembers(members, 'invite'), + + // ideally we'd size this to the page height, but + // in practice I find that a little constraining + truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS, + truncateAtInvited: INITIAL_LOAD_NUM_INVITED, + searchQuery: "", + }); }, componentWillUnmount: function() { From cae419e304c7fce0e53f746baa39ef37a292fbd2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 3 Sep 2018 11:13:56 +0200 Subject: [PATCH 3/3] avoid rerendering when LL is disabled --- src/components/views/rooms/MemberList.js | 52 +++++++++++++++--------- 1 file changed, 32 insertions(+), 20 deletions(-) diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js index b418eef121..d302bee832 100644 --- a/src/components/views/rooms/MemberList.js +++ b/src/components/views/rooms/MemberList.js @@ -33,16 +33,16 @@ module.exports = React.createClass({ getInitialState: function() { this.memberDict = this.getMemberDict(); - const members = this.roomMembers(); - return {loading: true}; + const cli = MatrixClientPeg.get(); + if (cli.hasLazyLoadMembersEnabled()) { + return {loading: true}; + } else { + return this._getMembersState(); + } }, - componentDidMount: async function() { - await this._waitForMembersToLoad(); - this.memberDict = this.getMemberDict(); - const members = this.roomMembers(); - + componentWillMount: function() { const cli = MatrixClientPeg.get(); cli.on("RoomState.members", this.onRoomStateMember); cli.on("RoomMember.name", this.onRoomMemberName); @@ -61,20 +61,14 @@ module.exports = React.createClass({ if (enablePresenceByHsUrl && enablePresenceByHsUrl[hsUrl] !== undefined) { this._showPresence = enablePresenceByHsUrl[hsUrl]; } - // set the state after determining _showPresence to make sure it's - // taken into account while rerendering - this.setState({ - loading: false, - members: members, - filteredJoinedMembers: this._filterMembers(members, 'join'), - filteredInvitedMembers: this._filterMembers(members, 'invite'), + }, - // ideally we'd size this to the page height, but - // in practice I find that a little constraining - truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS, - truncateAtInvited: INITIAL_LOAD_NUM_INVITED, - searchQuery: "", - }); + componentDidMount: async function() { + const cli = MatrixClientPeg.get(); + if (cli.hasLazyLoadMembersEnabled()) { + await this._waitForMembersToLoad(); + this.setState(this._getMembersState()); + } }, componentWillUnmount: function() { @@ -101,6 +95,24 @@ module.exports = React.createClass({ } }, + _getMembersState: function() { + const members = this.roomMembers(); + // set the state after determining _showPresence to make sure it's + // taken into account while rerendering + return { + loading: false, + members: members, + filteredJoinedMembers: this._filterMembers(members, 'join'), + filteredInvitedMembers: this._filterMembers(members, 'invite'), + + // ideally we'd size this to the page height, but + // in practice I find that a little constraining + truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS, + truncateAtInvited: INITIAL_LOAD_NUM_INVITED, + searchQuery: "", + }; + }, + /* onRoomTimeline: function(ev, room, toStartOfTimeline, removed, data) { // ignore anything but real-time updates at the end of the room: