Merge pull request #2139 from matrix-org/bwindels/memberlist-spinner

Show spinner in member list while loading members
pull/21833/head
Bruno Windels 2018-09-03 15:05:27 +02:00 committed by GitHub
commit 1eabb6012a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 12 deletions

View File

@ -33,19 +33,13 @@ module.exports = React.createClass({
getInitialState: function() {
this.memberDict = this.getMemberDict();
const members = this.roomMembers();
return {
members: members,
filteredJoinedMembers: this._filterMembers(members, 'join'),
filteredInvitedMembers: this._filterMembers(members, 'invite'),
// ideally we'd size this to the page height, but
// in practice I find that a little constraining
truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS,
truncateAtInvited: INITIAL_LOAD_NUM_INVITED,
searchQuery: "",
};
const cli = MatrixClientPeg.get();
if (cli.hasLazyLoadMembersEnabled()) {
return {loading: true};
} else {
return this._getMembersState();
}
},
componentWillMount: function() {
@ -69,6 +63,14 @@ module.exports = React.createClass({
}
},
componentDidMount: async function() {
const cli = MatrixClientPeg.get();
if (cli.hasLazyLoadMembersEnabled()) {
await this._waitForMembersToLoad();
this.setState(this._getMembersState());
}
},
componentWillUnmount: function() {
const cli = MatrixClientPeg.get();
if (cli) {
@ -84,6 +86,33 @@ 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();
}
},
_getMembersState: function() {
const members = this.roomMembers();
// set the state after determining _showPresence to make sure it's
// taken into account while rerendering
return {
loading: false,
members: members,
filteredJoinedMembers: this._filterMembers(members, 'join'),
filteredInvitedMembers: this._filterMembers(members, 'invite'),
// ideally we'd size this to the page height, but
// in practice I find that a little constraining
truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS,
truncateAtInvited: INITIAL_LOAD_NUM_INVITED,
searchQuery: "",
};
},
/*
onRoomTimeline: function(ev, room, toStartOfTimeline, removed, data) {
// ignore anything but real-time updates at the end of the room:
@ -393,6 +422,11 @@ module.exports = React.createClass({
},
render: function() {
if (this.state.loading) {
const Spinner = sdk.getComponent("elements.Spinner");
return <div className="mx_MemberList"><Spinner /></div>;
}
const TruncatedList = sdk.getComponent("elements.TruncatedList");
const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");