diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index e643e63df2..24aa552890 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.STATE_KEY.Summary), isGroupPublicised: this._groupStore.getGroupPublicity(), isUserPrivileged: this._groupStore.isUserPrivileged(), + groupRooms: this._groupStore.getGroupRooms(), + groupRoomsLoading: !this._groupStore.isStateReady(GroupStore.STATE_KEY.GroupRooms), isUserMember: this._groupStore.getGroupMembers().some( (m) => m.userId === MatrixClientPeg.get().credentials.userId, ), @@ -653,6 +660,7 @@ export default React.createClass({ const RoomDetailList = sdk.getComponent('rooms.RoomDetailList'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const TintableSvg = sdk.getComponent('elements.TintableSvg'); + const Spinner = sdk.getComponent('elements.Spinner'); const addRoomRow = this.state.editing ? ({ _t('Rooms') } { addRoomRow } - + { this.state.groupRoomsLoading ? + : + + } ; }, @@ -866,7 +877,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 ; } else if (this.state.summary) { const summary = this.state.summary; diff --git a/src/stores/GroupStore.js b/src/stores/GroupStore.js index 66bc293b44..3afac3c049 100644 --- a/src/stores/GroupStore.js +++ b/src/stores/GroupStore.js @@ -23,12 +23,23 @@ import FlairStore from './FlairStore'; * other useful group APIs that may have an effect on the group summary. */ export default class GroupStore extends EventEmitter { + + static STATE_KEY = { + GroupMembers: 'GroupMembers', + GroupInvitedMembers: 'GroupInvitedMembers', + Summary: 'Summary', + GroupRooms: 'GroupRooms', + }; + constructor(matrixClient, groupId) { super(); this.groupId = groupId; 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 +51,7 @@ export default class GroupStore extends EventEmitter { this._members = result.chunk.map((apiMember) => { return groupMemberFromApiObject(apiMember); }); + this._ready[GroupStore.STATE_KEY.GroupMembers] = true; this._notifyListeners(); }).catch((err) => { console.error("Failed to get group member list: " + err); @@ -50,6 +62,7 @@ export default class GroupStore extends EventEmitter { this._invitedMembers = result.chunk.map((apiMember) => { return groupMemberFromApiObject(apiMember); }); + this._ready[GroupStore.STATE_KEY.GroupInvitedMembers] = true; this._notifyListeners(); }).catch((err) => { // Invited users not visible to non-members @@ -64,6 +77,7 @@ export default class GroupStore extends EventEmitter { _fetchSummary() { this._matrixClient.getGroupSummary(this.groupId).then((resp) => { this._summary = resp; + this._ready[GroupStore.STATE_KEY.Summary] = true; this._notifyListeners(); }).catch((err) => { this.emit('error', err); @@ -75,6 +89,7 @@ export default class GroupStore extends EventEmitter { this._rooms = resp.chunk.map((apiRoom) => { return groupRoomFromApiObject(apiRoom); }); + this._ready[GroupStore.STATE_KEY.GroupRooms] = true; this._notifyListeners(); }).catch((err) => { this.emit('error', err); @@ -87,6 +102,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 +113,10 @@ export default class GroupStore extends EventEmitter { this.removeListener('update', fn); } + isStateReady(id) { + return this._ready[id]; + } + getSummary() { return this._summary; }