grishka/lemmy
1
0
Fork 0
Code Issues Pull requests 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

72
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,47 +208,50 @@ export class User extends Component<any, UserState> {
render() { render() {
return ( return (
<div class="container"> <div class="container">
{this.state.loading ? ( <div class="row">
<h5> <div class="col-12 col-md-8">
<svg class="icon icon-spinner spin"> <h5>
<use xlinkHref="#icon-spinner"></use> {this.state.user.avatar && showAvatars() && (
</svg> <img
</h5> height="80"
) : ( width="80"
<div class="row"> src={this.state.user.avatar}
<div class="col-12 col-md-8"> class="rounded-circle mr-2"
/>
)}
<span>/u/{this.state.username}</span>
</h5>
{this.state.loading ? (
<h5> <h5>
{this.state.user.avatar && showAvatars() && ( <svg class="icon icon-spinner spin">
<img <use xlinkHref="#icon-spinner"></use>
height="80" </svg>
width="80"
src={this.state.user.avatar}
class="rounded-circle mr-2"
/>
)}
<span>/u/{this.state.username}</span>
</h5> </h5>
{this.selects()} ) : (
<UserDetails this.selects()
user_id={this.state.user_id} )}
username={this.state.username} <UserDetails
sort={SortType[this.state.sort]} user_id={this.state.user_id}
page={this.state.page} username={this.state.username}
limit={fetchLimit} sort={SortType[this.state.sort]}
enableDownvotes={this.state.site.enable_downvotes} page={this.state.page}
enableNsfw={this.state.site.enable_nsfw} limit={fetchLimit}
view={this.state.view} enableDownvotes={this.state.site.enable_downvotes}
onPageChange={this.handlePageChange} enableNsfw={this.state.site.enable_nsfw}
/> view={this.state.view}
</div> onPageChange={this.handlePageChange}
/>
</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) {