From 37e60e4fc46e1e4b4446b18d34e678fd901a3516 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 23 Aug 2018 00:02:20 +0200
Subject: [PATCH 1/2] wait for members loading to finish to show the avatar in
 the composer

---
 src/components/views/rooms/MessageComposer.js | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index a7e02d16ae..eccdfe17af 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -71,6 +71,23 @@ export default class MessageComposer extends React.Component {
         // XXX: fragile as all hell - fixme somehow, perhaps with a dedicated Room.encryption event or something.
         MatrixClientPeg.get().on("event", this.onEvent);
         this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
+        this._waitForOwnMember();
+    }
+
+    _waitForOwnMember() {
+        // if we have the member already, do that
+        const me = this.props.room.getMember(MatrixClientPeg.get().getUserId());
+        if (me) {
+            this.setState({me});
+            return;
+        }
+        // Otherwise, wait for member loading to finish and then update the member for the avatar.
+        // The members should already be loading, and loadMembersIfNeeded
+        // will return the promise for the existing operation
+        this.props.room.loadMembersIfNeeded().then(() => {
+            const me = this.props.room.getMember(MatrixClientPeg.get().getUserId());
+            this.setState({me});
+        });
     }
 
     componentWillUnmount() {
@@ -208,7 +225,6 @@ export default class MessageComposer extends React.Component {
     }
 
     render() {
-        const me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
         const uploadInputStyle = {display: 'none'};
         const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
@@ -216,11 +232,13 @@ export default class MessageComposer extends React.Component {
 
         const controls = [];
 
-        controls.push(
-            <div key="controls_avatar" className="mx_MessageComposer_avatar">
-                <MemberAvatar member={me} width={24} height={24} />
-            </div>,
-        );
+        if (this.state.me) {
+            controls.push(
+                <div key="controls_avatar" className="mx_MessageComposer_avatar">
+                    <MemberAvatar member={this.state.me} width={24} height={24} />
+                </div>,
+            );
+        }
 
         let e2eImg, e2eTitle, e2eClass;
         const roomIsEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);

From cb84feefa928e5d8f5c98724844d3e327d50132e Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 23 Aug 2018 12:14:52 +0100
Subject: [PATCH 2/2] Add stub for getVisibleRooms()

Fixes the tests
---
 test/components/views/rooms/RoomList-test.js | 1 +
 test/test-utils.js                           | 1 +
 2 files changed, 2 insertions(+)

diff --git a/test/components/views/rooms/RoomList-test.js b/test/components/views/rooms/RoomList-test.js
index 1e9f80f161..fbb2dd4af9 100644
--- a/test/components/views/rooms/RoomList-test.js
+++ b/test/components/views/rooms/RoomList-test.js
@@ -94,6 +94,7 @@ describe('RoomList', () => {
             createRoom({tags: {'m.lowpriority': {}}, name: 'Some unimportant room'}),
             createRoom({tags: {'custom.tag': {}}, name: 'Some room customly tagged'}),
         ];
+        client.getVisibleRooms = client.getRooms;
 
         const roomMap = {};
         client.getRooms().forEach((r) => {
diff --git a/test/test-utils.js b/test/test-utils.js
index 25df9686ff..ef864bf9e0 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -74,6 +74,7 @@ export function createTestClient() {
         getPushActionsForEvent: sinon.stub(),
         getRoom: sinon.stub().returns(mkStubRoom()),
         getRooms: sinon.stub().returns([]),
+        getVisibleRooms: sinon.stub().returns([]),
         getGroups: sinon.stub().returns([]),
         loginFlows: sinon.stub(),
         on: sinon.stub(),