mirrors/lemmy
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy.git synced 2024-07-02 12:05:59 +00:00
Code Issues Projects Releases Wiki Activity

Better user page loading indicators. Fixes #986

Browse source
This commit is contained in:
Dessalines 2020-07-17 11:48:06 -04:00
parent 2a206e1b4d
commit aaa850c6c9
1 changed files with 38 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
ui/src/components/user.tsx vendored
View file

@ -93,7 +93,7 @@ export class User extends Component<any, UserState> {
username: null, username: null,
follows: [], follows: [],
moderates: [], moderates: [],
loading: false, loading: true,
avatarLoading: false, avatarLoading: false,
view: User.getViewFromProps(this.props.match.view), view: User.getViewFromProps(this.props.match.view),
sort: User.getSortTypeFromProps(this.props.match.sort), sort: User.getSortTypeFromProps(this.props.match.sort),
@ -208,13 +208,6 @@ export class User extends Component<any, UserState> {
render() { render() {
return ( return (
<div class="container"> <div class="container">
{this.state.loading ? (
<h5>
<svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use>
</svg>
</h5>
) : (
<div class="row"> <div class="row">
<div class="col-12 col-md-8"> <div class="col-12 col-md-8">
<h5> <h5>
@ -228,7 +221,15 @@ export class User extends Component<any, UserState> {
)} )}
<span>/u/{this.state.username}</span> <span>/u/{this.state.username}</span>
</h5> </h5>
{this.selects()} {this.state.loading ? (
<h5>
<svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use>
</svg>
</h5>
) : (
this.selects()
)}
<UserDetails <UserDetails
user_id={this.state.user_id} user_id={this.state.user_id}
username={this.state.username} username={this.state.username}
@ -241,15 +242,17 @@ export class User extends Component<any, UserState> {
onPageChange={this.handlePageChange} onPageChange={this.handlePageChange}
/> />
</div> </div>
{!this.state.loading && (
<div class="col-12 col-md-4"> <div class="col-12 col-md-4">
{this.userInfo()} {this.userInfo()}
{this.isCurrentUser && this.userSettings()} {this.isCurrentUser && this.userSettings()}
{this.moderates()} {this.moderates()}
{this.follows()} {this.follows()}
</div> </div>
</div>
)} )}
</div> </div>
</div>
); );
} }
@ -1042,6 +1045,7 @@ export class User extends Component<any, UserState> {
UserService.Instance.user.show_avatars; UserService.Instance.user.show_avatars;
this.state.userSettingsForm.matrix_user_id = this.state.user.matrix_user_id; this.state.userSettingsForm.matrix_user_id = this.state.user.matrix_user_id;
} }
this.state.loading = false;
this.setState(this.state); this.setState(this.state);
} }
} else if (res.op == UserOperation.SaveUserSettings) { } else if (res.op == UserOperation.SaveUserSettings) {