Mirrors/lemmy
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy synced 2024-11-23 13:03:11 +00:00
Code Issues Projects Releases Packages 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

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

@ -93,7 +93,7 @@ export class User extends Component<any, UserState> {
username: null,
follows: [],
moderates: [],
loading: false,
loading: true,
avatarLoading: false,
view: User.getViewFromProps(this.props.match.view),
sort: User.getSortTypeFromProps(this.props.match.sort),
@ -208,47 +208,50 @@ export class User extends Component<any, UserState> {
render() {
return (
<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="col-12 col-md-8">
<div class="row">
<div class="col-12 col-md-8">
<h5>
{this.state.user.avatar && showAvatars() && (
<img
height="80"
width="80"
src={this.state.user.avatar}
class="rounded-circle mr-2"
/>
)}
<span>/u/{this.state.username}</span>
</h5>
{this.state.loading ? (
<h5>
{this.state.user.avatar && showAvatars() && (
<img
height="80"
width="80"
src={this.state.user.avatar}
class="rounded-circle mr-2"
/>
)}
<span>/u/{this.state.username}</span>
<svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use>
</svg>
</h5>
{this.selects()}
<UserDetails
user_id={this.state.user_id}
username={this.state.username}
sort={SortType[this.state.sort]}
page={this.state.page}
limit={fetchLimit}
enableDownvotes={this.state.site.enable_downvotes}
enableNsfw={this.state.site.enable_nsfw}
view={this.state.view}
onPageChange={this.handlePageChange}
/>
</div>
) : (
this.selects()
)}
<UserDetails
user_id={this.state.user_id}
username={this.state.username}
sort={SortType[this.state.sort]}
page={this.state.page}
limit={fetchLimit}
enableDownvotes={this.state.site.enable_downvotes}
enableNsfw={this.state.site.enable_nsfw}
view={this.state.view}
onPageChange={this.handlePageChange}
/>
</div>
{!this.state.loading && (
<div class="col-12 col-md-4">
{this.userInfo()}
{this.isCurrentUser && this.userSettings()}
{this.moderates()}
{this.follows()}
</div>
</div>
)}
)}
</div>
</div>
);
}
@ -1042,6 +1045,7 @@ export class User extends Component<any, UserState> {
UserService.Instance.user.show_avatars;
this.state.userSettingsForm.matrix_user_id = this.state.user.matrix_user_id;
}
this.state.loading = false;
this.setState(this.state);
}
} else if (res.op == UserOperation.SaveUserSettings) {