Merge pull request #2165 from matrix-org/bwindels/fixllpeeking

postpone loading the members until the user joined the room

src/components/structures/RoomView.js

@@ -314,16 +314,6 @@ module.exports = React.createClass({
                 // Stop peeking because we have joined this room previously
                 MatrixClientPeg.get().stopPeeking();
                 this.setState({isPeeking: false});
-
-                // lazy load members if enabled
-                if (SettingsStore.isFeatureEnabled('feature_lazyloading')) {
-                    room.loadMembersIfNeeded().catch((err) => {
-                        const errorMessage = `Fetching room members for ${room.roomId} failed.` +
-                            " Room members will appear incomplete.";
-                        console.error(errorMessage);
-                        console.error(err);
-                    });
-                }
             }
         }
     },
@@ -592,6 +582,23 @@ module.exports = React.createClass({
         this._warnAboutEncryption(room);
         this._calculatePeekRules(room);
         this._updatePreviewUrlVisibility(room);
+        this._loadMembersIfJoined();
+    },
+
+    _loadMembersIfJoined: function() {
+        // lazy load members if enabled
+        if (SettingsStore.isFeatureEnabled('feature_lazyloading')) {
+            const cli = MatrixClientPeg.get();
+            const room = cli.getRoom(this.state.roomId);
+            if (room && room.getMyMembership() === 'join') {
+                room.loadMembersIfNeeded().catch((err) => {
+                    const errorMessage = `Fetching room members for ${room.roomId} failed.` +
+                        " Room members will appear incomplete.";
+                    console.error(errorMessage);
+                    console.error(err);
+                });
+            }
+        }
     },
 
     _warnAboutEncryption: function(room) {
@@ -705,6 +712,7 @@ module.exports = React.createClass({
 
     onRoomMemberMembership: function(ev, member, oldMembership) {
         if (member.userId == MatrixClientPeg.get().credentials.userId) {
+            this._loadMembersIfJoined();
             this.forceUpdate();
         }
     },

src/components/views/rooms/MemberList.js

@@ -46,6 +46,8 @@ module.exports = React.createClass({
         if (!cli.hasLazyLoadMembersEnabled()) {
             this._listenForMembersChanges();
         }
+        cli.on("Room", this.onRoom); // invites & joining after peek
+        cli.on("RoomMember.membership", this.onRoomMembership); // update when accepting an invite
         const enablePresenceByHsUrl = SdkConfig.get()["enable_presence_by_hs_url"];
         const hsUrl = MatrixClientPeg.get().baseUrl;
         this._showPresence = true;
@@ -59,7 +61,6 @@ module.exports = React.createClass({
         cli.on("RoomState.members", this.onRoomStateMember);
         cli.on("RoomMember.name", this.onRoomMemberName);
         cli.on("RoomState.events", this.onRoomStateEvent);
-        cli.on("Room", this.onRoom); // invites
         // We listen for changes to the lastPresenceTs which is essentially
         // listening for all presence events (we display most of not all of
         // the information contained in presence events).
@@ -69,14 +70,7 @@ module.exports = React.createClass({
 
     componentDidMount: async function() {
         this._mounted = true;
-        const cli = MatrixClientPeg.get();
+        this._loadMembersIfNeeded(true);
-        if (cli.hasLazyLoadMembersEnabled()) {
-            await this._waitForMembersToLoad();
-            if (this._mounted) {
-                this.setState(this._getMembersState());
-                this._listenForMembersChanges();
-            }
-        }
     },
 
     componentWillUnmount: function() {
@@ -85,6 +79,7 @@ module.exports = React.createClass({
         if (cli) {
             cli.removeListener("RoomState.members", this.onRoomStateMember);
             cli.removeListener("RoomMember.name", this.onRoomMemberName);
+            cli.removeListener("RoomMember.membership", this.onRoomMembership);
             cli.removeListener("RoomState.events", this.onRoomStateEvent);
             cli.removeListener("Room", this.onRoom);
             cli.removeListener("User.lastPresenceTs", this.onUserLastPresenceTs);
@@ -95,14 +90,24 @@ module.exports = React.createClass({
         this._updateList.cancelPendingCall();
     },
 
-    _waitForMembersToLoad: async function() {
+    _loadMembersIfNeeded: async function(initial) {
-        if (!this.props.roomId) return {};
         const cli = MatrixClientPeg.get();
-        const room = cli.getRoom(this.props.roomId);
+        if (cli.hasLazyLoadMembersEnabled()) {
-        if (room) {
+            const cli = MatrixClientPeg.get();
-            try {
+            const room = cli.getRoom(this.props.roomId);
-                await room.loadMembersIfNeeded();
+            if (room && room.getMyMembership() === 'join') {
-            } catch(ex) {/* already logged in RoomView */}
+                this.setState({loading: true});
+                try {
+                    await room.loadMembersIfNeeded();
+                } catch(ex) {/* already logged in RoomView */}
+                if (this._mounted) {
+                    this.setState(this._getMembersState());
+                    this._listenForMembersChanges();
+                }
+            } else if(initial) {
+                // show the members we've got
+                this.setState(this._getMembersState());
+            }
         }
     },
 
@@ -170,7 +175,21 @@ module.exports = React.createClass({
         // We listen for room events because when we accept an invite
         // we need to wait till the room is fully populated with state
         // before refreshing the member list else we get a stale list.
-        this._updateList();
+
+        // also when peeking, we need to await the members being loaded
+        // before showing them.
+
+        this._loadMembersIfNeeded();
+    },
+
+    onRoomMembership: function(ev, member, oldMembership) {
+        const cli = MatrixClientPeg.get();
+        const myId = cli.getUserId();
+        if (member.userId === myId && oldMembership !== "join" && member.membership === "join") {
+            // once we've joined, no need to listen for membership anymore
+            cli.removeListener("RoomMember.membership", this.onRoomMembership);
+            this._loadMembersIfNeeded();
+        }
     },
 
     onRoomStateMember: function(ev, state, member) {
@@ -197,6 +216,7 @@ module.exports = React.createClass({
     _updateList: new rate_limited_func(function() {
         // console.log("Updating memberlist");
         const newState = {
+            loading: false,
             members: this.roomMembers(),
         };
         newState.filteredJoinedMembers = this._filterMembers(newState.members, 'join', this.state.searchQuery);

src/stores/RoomListStore.js

@@ -214,8 +214,6 @@ class RoomListStore extends Store {
                 }
             } else if (membership === "leave") {
                 lists["im.vector.fake.archived"].push(room);
-            } else {
-                console.error("unrecognised membership: " + membership + " - this should never happen");
             }
         });