LemmyNet
/
lemmy-ui
mirror of https://github.com/LemmyNet/lemmy-ui.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fixing loading on community page. Fixes #91

This commit is contained in:
Dessalines 2020-12-02 09:13:01 -06:00
parent c772da06fe
commit fa4a6bd389
1 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/shared/components/community.tsx
View File

@ -60,7 +60,9 @@ interface State {
siteRes: GetSiteResponse; siteRes: GetSiteResponse;
communityId: number; communityId: number;
communityName: string; communityName: string;
loading: boolean; communityLoading: boolean;
postsLoading: boolean;
commentsLoading: boolean;
posts: Post[]; posts: Post[];
comments: Comment[]; comments: Comment[];
dataType: DataType; dataType: DataType;
@ -88,7 +90,9 @@ export class Community extends Component<any, State> {
communityRes: undefined, communityRes: undefined,
communityId: Number(this.props.match.params.id), communityId: Number(this.props.match.params.id),
communityName: this.props.match.params.name, communityName: this.props.match.params.name,
loading: true, communityLoading: true,
postsLoading: true,
commentsLoading: true,
posts: [], posts: [],
comments: [], comments: [],
dataType: getDataTypeFromProps(this.props), dataType: getDataTypeFromProps(this.props),
@ -117,7 +121,9 @@ export class Community extends Component<any, State> {
this.state.comments = this.isoData.routeData[1].comments; this.state.comments = this.isoData.routeData[1].comments;
} }
this.state.categories = this.isoData.routeData[2].categories; this.state.categories = this.isoData.routeData[2].categories;
this.state.loading = false; this.state.communityLoading = false;
this.state.postsLoading = false;
this.state.commentsLoading = false;
} else { } else {
this.fetchCommunity(); this.fetchCommunity();
this.fetchData(); this.fetchData();
@ -220,7 +226,7 @@ export class Community extends Component<any, State> {
lastState.sort !== this.state.sort || lastState.sort !== this.state.sort ||
lastState.page !== this.state.page lastState.page !== this.state.page
) { ) {
this.setState({ loading: true }); this.setState({ postsLoading: true, commentsLoading: true });
this.fetchData(); this.fetchData();
} }
} }
@ -232,7 +238,7 @@ export class Community extends Component<any, State> {
render() { render() {
return ( return (
<div class="container"> <div class="container">
{this.state.loading ? ( {this.state.communityLoading ? (
<h5> <h5>
<svg class="icon icon-spinner spin"> <svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use> <use xlinkHref="#icon-spinner"></use>
@ -270,13 +276,27 @@ export class Community extends Component<any, State> {
listings() { listings() {
return this.state.dataType == DataType.Post ? ( return this.state.dataType == DataType.Post ? (
<PostListings this.state.postsLoading ? (
posts={this.state.posts} <h5>
removeDuplicates <svg class="icon icon-spinner spin">
sort={this.state.sort} <use xlinkHref="#icon-spinner"></use>
enableDownvotes={this.state.siteRes.site.enable_downvotes} </svg>
enableNsfw={this.state.siteRes.site.enable_nsfw} </h5>
/> ) : (
<PostListings
posts={this.state.posts}
removeDuplicates
sort={this.state.sort}
enableDownvotes={this.state.siteRes.site.enable_downvotes}
enableNsfw={this.state.siteRes.site.enable_nsfw}
/>
)
) : this.state.commentsLoading ? (
<h5>
<svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use>
</svg>
</h5>
) : ( ) : (
<CommentNodes <CommentNodes
nodes={commentsToFlatNodes(this.state.comments)} nodes={commentsToFlatNodes(this.state.comments)}
@ -428,9 +448,7 @@ export class Community extends Component<any, State> {
} else if (res.op == UserOperation.GetCommunity) { } else if (res.op == UserOperation.GetCommunity) {
let data = res.data as GetCommunityResponse; let data = res.data as GetCommunityResponse;
this.state.communityRes = data; this.state.communityRes = data;
if (this.state.posts.length || this.state.comments.length) { this.state.communityLoading = false;
this.state.loading = false;
}
this.setState(this.state); this.setState(this.state);
WebSocketService.Instance.communityJoin({ WebSocketService.Instance.communityJoin({
community_id: data.community.id, community_id: data.community.id,
@ -452,10 +470,7 @@ export class Community extends Component<any, State> {
} else if (res.op == UserOperation.GetPosts) { } else if (res.op == UserOperation.GetPosts) {
let data = res.data as GetPostsResponse; let data = res.data as GetPostsResponse;
this.state.posts = data.posts; this.state.posts = data.posts;
this.state.postsLoading = false;
if (this.state.communityRes) {
this.state.loading = false;
}
this.setState(this.state); this.setState(this.state);
setupTippy(); setupTippy();
} else if ( } else if (
@ -493,9 +508,7 @@ export class Community extends Component<any, State> {
} else if (res.op == UserOperation.GetComments) { } else if (res.op == UserOperation.GetComments) {
let data = res.data as GetCommentsResponse; let data = res.data as GetCommentsResponse;
this.state.comments = data.comments; this.state.comments = data.comments;
if (this.state.communityRes) { this.state.commentsLoading = false;
this.state.loading = false;
}
this.setState(this.state); this.setState(this.state);
} else if ( } else if (
res.op == UserOperation.EditComment || res.op == UserOperation.EditComment ||