From 775468e71a89288ac76fd657413f1b10514cb907 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 31 Oct 2017 11:42:09 +0000
Subject: [PATCH] Display whether the group summary/room list is loading

This uses a `ready` flag assigned to each fetching API used by the GroupServer. I've avoided making this generic for now for want of not doing so early.
---
 src/components/structures/GroupView.js       | 11 +++++++++--
 src/components/views/rooms/RoomDetailList.js |  6 ++++++
 src/stores/GroupStore.js                     | 13 +++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index fa75df53f0..76f6bc7335 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -407,6 +407,10 @@ export default React.createClass({
     getInitialState: function() {
         return {
             summary: null,
+            isGroupPublicised: null,
+            isUserPrivileged: null,
+            groupRooms: null,
+            groupRoomsLoading: null,
             error: null,
             editing: false,
             saving: false,
@@ -458,8 +462,11 @@ export default React.createClass({
             }
             this.setState({
                 summary,
+                summaryLoading: !this._groupStore.isStateReady('GroupStore.Summary'),
                 isGroupPublicised: this._groupStore.getGroupPublicity(),
                 isUserPrivileged: this._groupStore.isUserPrivileged(),
+                groupRooms: this._groupStore.getGroupRooms(),
+                groupRoomsLoading: !this._groupStore.isStateReady('GroupStore.GroupRooms'),
                 error: null,
             });
         });
@@ -667,7 +674,7 @@ export default React.createClass({
                 <h3>{ _t('Rooms') }</h3>
                 { addRoomRow }
             </div>
-            <RoomDetailList rooms={this._groupStore.getGroupRooms()} />
+            <RoomDetailList rooms={this.state.groupRooms} loading={this.state.groupRoomsLoading} />
         </div>;
     },
 
@@ -863,7 +870,7 @@ export default React.createClass({
         const Spinner = sdk.getComponent("elements.Spinner");
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
-        if (this.state.summary === null && this.state.error === null || this.state.saving) {
+        if (this.state.summaryLoading && this.state.error === null || this.state.saving) {
             return <Spinner />;
         } else if (this.state.summary) {
             const summary = this.state.summary;
diff --git a/src/components/views/rooms/RoomDetailList.js b/src/components/views/rooms/RoomDetailList.js
index be9de849e9..cdd05d1698 100644
--- a/src/components/views/rooms/RoomDetailList.js
+++ b/src/components/views/rooms/RoomDetailList.js
@@ -113,6 +113,8 @@ export default React.createClass({
 
             worldReadable: PropTypes.bool,
             guestCanJoin: PropTypes.bool,
+
+            loading: PropTypes.bool,
         })),
     },
 
@@ -124,6 +126,10 @@ export default React.createClass({
     },
 
     render() {
+        const Spinner = sdk.getComponent('elements.Spinner');
+        if (this.props.loading) {
+            return <Spinner />;
+        }
         const rows = this.getRows();
         let rooms;
         if (rows.length == 0) {
diff --git a/src/stores/GroupStore.js b/src/stores/GroupStore.js
index 66bc293b44..d3c514f489 100644
--- a/src/stores/GroupStore.js
+++ b/src/stores/GroupStore.js
@@ -29,6 +29,9 @@ export default class GroupStore extends EventEmitter {
         this._matrixClient = matrixClient;
         this._summary = {};
         this._rooms = [];
+        this._members = [];
+        this._invitedMembers = [];
+        this._ready = {};
 
         this.on('error', (err) => {
             console.error(`GroupStore for ${this.groupId} encountered error`, err);
@@ -40,6 +43,7 @@ export default class GroupStore extends EventEmitter {
             this._members = result.chunk.map((apiMember) => {
                 return groupMemberFromApiObject(apiMember);
             });
+            this._ready['GroupStore.GroupMembers'] = true;
             this._notifyListeners();
         }).catch((err) => {
             console.error("Failed to get group member list: " + err);
@@ -50,6 +54,7 @@ export default class GroupStore extends EventEmitter {
             this._invitedMembers = result.chunk.map((apiMember) => {
                 return groupMemberFromApiObject(apiMember);
             });
+            this._ready['GroupStore.GroupInvitedMembers'] = true;
             this._notifyListeners();
         }).catch((err) => {
             // Invited users not visible to non-members
@@ -64,6 +69,7 @@ export default class GroupStore extends EventEmitter {
     _fetchSummary() {
         this._matrixClient.getGroupSummary(this.groupId).then((resp) => {
             this._summary = resp;
+            this._ready['GroupStore.Summary'] = true;
             this._notifyListeners();
         }).catch((err) => {
             this.emit('error', err);
@@ -75,6 +81,7 @@ export default class GroupStore extends EventEmitter {
             this._rooms = resp.chunk.map((apiRoom) => {
                 return groupRoomFromApiObject(apiRoom);
             });
+            this._ready['GroupStore.GroupRooms'] = true;
             this._notifyListeners();
         }).catch((err) => {
             this.emit('error', err);
@@ -87,6 +94,8 @@ export default class GroupStore extends EventEmitter {
 
     registerListener(fn) {
         this.on('update', fn);
+        // Call to set initial state (before fetching starts)
+        this.emit('update');
         this._fetchSummary();
         this._fetchRooms();
         this._fetchMembers();
@@ -96,6 +105,10 @@ export default class GroupStore extends EventEmitter {
         this.removeListener('update', fn);
     }
 
+    isStateReady(id) {
+        return this._ready[id];
+    }
+
     getSummary() {
         return this._summary;
     }