Merge pull request #2139 from matrix-org/bwindels/memberlist-spinner
Show spinner in member list while loading members
This commit is contained in:
commit
1eabb6012a
1 changed files with 46 additions and 12 deletions
|
@ -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");
|
||||
|
||||
|
|
Loading…
Reference in a new issue