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