fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-22 22:49:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixing too many large spinners (#337)

Browse source
This commit is contained in:
Dessalines 2021-07-17 16:21:31 -04:00 committed by GitHub
parent 0774ea6372
commit 2d8be72b33
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 51 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/assets/css/main.css
View file

@ -132,7 +132,7 @@
margin-bottom: 2px; margin-bottom: 2px;
} }
.icon-spinner { .spinner-large {
width: 4em; width: 4em;
height: 4em; height: 4em;
} }

11
src/shared/components/admin-settings.tsx
View file

@ -65,7 +65,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
// Only fetch the data if coming from another route // Only fetch the data if coming from another route
if (this.isoData.path == this.context.router.route.match.url) { if (this.isoData.path == this.context.router.route.match.url) {
this.state.siteConfigRes = this.isoData.routeData[0]; this.state.siteConfigRes = this.isoData.routeData[0];
this.state.siteConfigForm.config_hjson = this.state.siteConfigRes.config_hjson; this.state.siteConfigForm.config_hjson =
this.state.siteConfigRes.config_hjson;
this.state.siteConfigLoading = false; this.state.siteConfigLoading = false;
this.state.loading = false; this.state.loading = false;
} else { } else {
@ -110,7 +111,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
/> />
{this.state.loading ? ( {this.state.loading ? (
<h5> <h5>
<Spinner /> <Spinner large />
</h5> </h5>
) : ( ) : (
<div class="row"> <div class="row">
@ -228,14 +229,16 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
let data = wsJsonToRes<GetSiteConfigResponse>(msg).data; let data = wsJsonToRes<GetSiteConfigResponse>(msg).data;
this.state.siteConfigRes = data; this.state.siteConfigRes = data;
this.state.loading = false; this.state.loading = false;
this.state.siteConfigForm.config_hjson = this.state.siteConfigRes.config_hjson; this.state.siteConfigForm.config_hjson =
this.state.siteConfigRes.config_hjson;
this.setState(this.state); this.setState(this.state);
var textarea: any = document.getElementById(this.siteConfigTextAreaId); var textarea: any = document.getElementById(this.siteConfigTextAreaId);
autosize(textarea); autosize(textarea);
} else if (op == UserOperation.SaveSiteConfig) { } else if (op == UserOperation.SaveSiteConfig) {
let data = wsJsonToRes<GetSiteConfigResponse>(msg).data; let data = wsJsonToRes<GetSiteConfigResponse>(msg).data;
this.state.siteConfigRes = data; this.state.siteConfigRes = data;
this.state.siteConfigForm.config_hjson = this.state.siteConfigRes.config_hjson; this.state.siteConfigForm.config_hjson =
this.state.siteConfigRes.config_hjson;
this.state.siteConfigLoading = false; this.state.siteConfigLoading = false;
toast(i18n.t("site_saved")); toast(i18n.t("site_saved"));
this.setState(this.state); this.setState(this.state);

2
src/shared/components/communities.tsx
View file

@ -105,7 +105,7 @@ export class Communities extends Component<any, CommunitiesState> {
/> />
{this.state.loading ? ( {this.state.loading ? (
<h5> <h5>
<Spinner /> <Spinner large />
</h5> </h5>
) : ( ) : (
<div> <div>

6
src/shared/components/community.tsx
View file

@ -243,7 +243,7 @@ export class Community extends Component<any, State> {
<div class="container"> <div class="container">
{this.state.communityLoading ? ( {this.state.communityLoading ? (
<h5> <h5>
<Spinner /> <Spinner large />
</h5> </h5>
) : ( ) : (
<div class="row"> <div class="row">
@ -282,7 +282,7 @@ export class Community extends Component<any, State> {
return this.state.dataType == DataType.Post ? ( return this.state.dataType == DataType.Post ? (
this.state.postsLoading ? ( this.state.postsLoading ? (
<h5> <h5>
<Spinner /> <Spinner large />
</h5> </h5>
) : ( ) : (
<PostListings <PostListings
@ -294,7 +294,7 @@ export class Community extends Component<any, State> {
) )
) : this.state.commentsLoading ? ( ) : this.state.commentsLoading ? (
<h5> <h5>
<Spinner /> <Spinner large />
</h5> </h5>
) : ( ) : (
<CommentNodes <CommentNodes

2
src/shared/components/create-community.tsx
View file

@ -53,7 +53,7 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
/> />
{this.state.loading ? ( {this.state.loading ? (
<h5> <h5>
<Spinner /> <Spinner large />
</h5> </h5>
) : ( ) : (
<div class="row"> <div class="row">

2
src/shared/components/create-post.tsx
View file

@ -111,7 +111,7 @@ export class CreatePost extends Component<any, CreatePostState> {
/> />
{this.state.loading ? ( {this.state.loading ? (
<h5> <h5>
<Spinner /> <Spinner large />
</h5> </h5>
) : ( ) : (
<div class="row"> <div class="row">

7
src/shared/components/create-private-message.tsx
View file

@ -48,9 +48,8 @@ export class CreatePrivateMessage extends Component<
constructor(props: any, context: any) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.state = this.emptyState; this.state = this.emptyState;
this.handlePrivateMessageCreate = this.handlePrivateMessageCreate.bind( this.handlePrivateMessageCreate =
this this.handlePrivateMessageCreate.bind(this);
);
this.parseMessage = this.parseMessage.bind(this); this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage); this.subscription = wsSubscribe(this.parseMessage);
@ -111,7 +110,7 @@ export class CreatePrivateMessage extends Component<
/> />
{this.state.loading ? ( {this.state.loading ? (
<h5> <h5>
<Spinner /> <Spinner large />
</h5> </h5>
) : ( ) : (
<div class="row"> <div class="row">

13
src/shared/components/icon.tsx
View file

@ -22,12 +22,21 @@ export class Icon extends Component<IconProps, any> {
} }
} }
export class Spinner extends Component<any, any> { interface SpinnerProps {
large?: boolean;
}
export class Spinner extends Component<SpinnerProps, any> {
constructor(props: any, context: any) { constructor(props: any, context: any) {
super(props, context); super(props, context);
} }
render() { render() {
return <Icon icon="spinner" classes="icon-spinner spin" />; return (
<Icon
icon="spinner"
classes={`spin ${this.props.large && "spinner-large"}`}
/>
);
} }
} }

2
src/shared/components/inbox.tsx
View file

@ -140,7 +140,7 @@ export class Inbox extends Component<any, InboxState> {
<div class="container"> <div class="container">
{this.state.loading ? ( {this.state.loading ? (
<h5> <h5>
<Spinner /> <Spinner large />
</h5> </h5>
) : ( ) : (
<div class="row"> <div class="row">

2
src/shared/components/main.tsx
View file

@ -550,7 +550,7 @@ export class Main extends Component<any, MainState> {
<div class="main-content-wrapper"> <div class="main-content-wrapper">
{this.state.loading ? ( {this.state.loading ? (
<h5> <h5>
<Spinner /> <Spinner large />
</h5> </h5>
) : ( ) : (
<div> <div>

2
src/shared/components/modlog.tsx
View file

@ -407,7 +407,7 @@ export class Modlog extends Component<any, ModlogState> {
/> />
{this.state.loading ? ( {this.state.loading ? (
<h5> <h5>
<Spinner /> <Spinner large />
</h5> </h5>
) : ( ) : (
<div> <div>

39
src/shared/components/person.tsx
View file

@ -133,16 +133,13 @@ export class Person extends Component<any, PersonState> {
this.state = this.emptyState; this.state = this.emptyState;
this.handleSortChange = this.handleSortChange.bind(this); this.handleSortChange = this.handleSortChange.bind(this);
this.handleUserSettingsSortTypeChange = this.handleUserSettingsSortTypeChange.bind( this.handleUserSettingsSortTypeChange =
this this.handleUserSettingsSortTypeChange.bind(this);
); this.handleUserSettingsListingTypeChange =
this.handleUserSettingsListingTypeChange = this.handleUserSettingsListingTypeChange.bind( this.handleUserSettingsListingTypeChange.bind(this);
this
);
this.handlePageChange = this.handlePageChange.bind(this); this.handlePageChange = this.handlePageChange.bind(this);
this.handleUserSettingsBioChange = this.handleUserSettingsBioChange.bind( this.handleUserSettingsBioChange =
this this.handleUserSettingsBioChange.bind(this);
);
this.handleAvatarUpload = this.handleAvatarUpload.bind(this); this.handleAvatarUpload = this.handleAvatarUpload.bind(this);
this.handleAvatarRemove = this.handleAvatarRemove.bind(this); this.handleAvatarRemove = this.handleAvatarRemove.bind(this);
@ -276,7 +273,7 @@ export class Person extends Component<any, PersonState> {
<div class="container"> <div class="container">
{this.state.loading ? ( {this.state.loading ? (
<h5> <h5>
<Spinner /> <Spinner large />
</h5> </h5>
) : ( ) : (
<div class="row"> <div class="row">
@ -1052,16 +1049,14 @@ export class Person extends Component<any, PersonState> {
} }
handleUserSettingsSortTypeChange(val: SortType) { handleUserSettingsSortTypeChange(val: SortType) {
this.state.saveUserSettingsForm.default_sort_type = Object.keys( this.state.saveUserSettingsForm.default_sort_type =
SortType Object.keys(SortType).indexOf(val);
).indexOf(val);
this.setState(this.state); this.setState(this.state);
} }
handleUserSettingsListingTypeChange(val: ListingType) { handleUserSettingsListingTypeChange(val: ListingType) {
this.state.saveUserSettingsForm.default_listing_type = Object.keys( this.state.saveUserSettingsForm.default_listing_type =
ListingType Object.keys(ListingType).indexOf(val);
).indexOf(val);
this.setState(this.state); this.setState(this.state);
} }
@ -1252,10 +1247,14 @@ export class Person extends Component<any, PersonState> {
} else if (op == UserOperation.SaveUserSettings) { } else if (op == UserOperation.SaveUserSettings) {
let data = wsJsonToRes<LoginResponse>(msg).data; let data = wsJsonToRes<LoginResponse>(msg).data;
UserService.Instance.login(data); UserService.Instance.login(data);
this.state.personRes.person_view.person.bio = this.state.saveUserSettingsForm.bio; this.state.personRes.person_view.person.bio =
this.state.personRes.person_view.person.display_name = this.state.saveUserSettingsForm.display_name; this.state.saveUserSettingsForm.bio;
this.state.personRes.person_view.person.banner = this.state.saveUserSettingsForm.banner; this.state.personRes.person_view.person.display_name =
this.state.personRes.person_view.person.avatar = this.state.saveUserSettingsForm.avatar; this.state.saveUserSettingsForm.display_name;
this.state.personRes.person_view.person.banner =
this.state.saveUserSettingsForm.banner;
this.state.personRes.person_view.person.avatar =
this.state.saveUserSettingsForm.avatar;
this.state.saveUserSettingsLoading = false; this.state.saveUserSettingsLoading = false;
this.setState(this.state); this.setState(this.state);

2
src/shared/components/post.tsx
View file

@ -252,7 +252,7 @@ export class Post extends Component<any, PostState> {
<div class="container"> <div class="container">
{this.state.loading ? ( {this.state.loading ? (
<h5> <h5>
<Spinner /> <Spinner large />
</h5> </h5>
) : ( ) : (
<div class="row"> <div class="row">