Fixing too many large spinners (#337)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 45b34cee2e37c202b1e3e7f853657794e856ade6..80eb20b1c917341c215dbee549fa383c7ca87d82 100644 (file)
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -132,7 +132,7 @@
   margin-bottom: 2px;
 }
 
-.icon-spinner {
+.spinner-large {
   width: 4em;
   height: 4em;
 }

diff --git a/src/shared/components/admin-settings.tsx b/src/shared/components/admin-settings.tsx
index 19856f3c6033a48293256931e91dafc843083c0d..d9aa74b176e5a2ac03cd3bd745567612843d4fd1 100644 (file)
--- a/src/shared/components/admin-settings.tsx
+++ b/src/shared/components/admin-settings.tsx
@@ -65,7 +65,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     // Only fetch the data if coming from another route
     if (this.isoData.path == this.context.router.route.match.url) {
       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.loading = false;
     } else {
@@ -110,7 +111,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
         />
         {this.state.loading ? (
           <h5>
-            <Spinner />
+            <Spinner large />
           </h5>
         ) : (
           <div class="row">
@@ -228,14 +229,16 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
       let data = wsJsonToRes<GetSiteConfigResponse>(msg).data;
       this.state.siteConfigRes = data;
       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);
       var textarea: any = document.getElementById(this.siteConfigTextAreaId);
       autosize(textarea);
     } else if (op == UserOperation.SaveSiteConfig) {
       let data = wsJsonToRes<GetSiteConfigResponse>(msg).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;
       toast(i18n.t("site_saved"));
       this.setState(this.state);

diff --git a/src/shared/components/communities.tsx b/src/shared/components/communities.tsx
index 1004da5d9ded78b1d8b978575934095ae2be7c21..875ceeac8046c4b14860ecba7bd3b5e3c0e9f983 100644 (file)
--- a/src/shared/components/communities.tsx
+++ b/src/shared/components/communities.tsx
@@ -105,7 +105,7 @@ export class Communities extends Component<any, CommunitiesState> {
         />
         {this.state.loading ? (
           <h5>
-            <Spinner />
+            <Spinner large />
           </h5>
         ) : (
           <div>

diff --git a/src/shared/components/community.tsx b/src/shared/components/community.tsx
index 8852b675a57d93d34094db705f532662038ebc77..4a82da61afc6bd6854fa47c0d0ace89f96a44bd3 100644 (file)
--- a/src/shared/components/community.tsx
+++ b/src/shared/components/community.tsx
@@ -243,7 +243,7 @@ export class Community extends Component<any, State> {
       <div class="container">
         {this.state.communityLoading ? (
           <h5>
-            <Spinner />
+            <Spinner large />
           </h5>
         ) : (
           <div class="row">
@@ -282,7 +282,7 @@ export class Community extends Component<any, State> {
     return this.state.dataType == DataType.Post ? (
       this.state.postsLoading ? (
         <h5>
-          <Spinner />
+          <Spinner large />
         </h5>
       ) : (
         <PostListings
@@ -294,7 +294,7 @@ export class Community extends Component<any, State> {
       )
     ) : this.state.commentsLoading ? (
       <h5>
-        <Spinner />
+        <Spinner large />
       </h5>
     ) : (
       <CommentNodes

diff --git a/src/shared/components/create-community.tsx b/src/shared/components/create-community.tsx
index 52c28330654aceef46148db7a7de7f3609874b65..c8e3111e2f57ff2f674401203d8f4cc19bfe2cd8 100644 (file)
--- a/src/shared/components/create-community.tsx
+++ b/src/shared/components/create-community.tsx
@@ -53,7 +53,7 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
         />
         {this.state.loading ? (
           <h5>
-            <Spinner />
+            <Spinner large />
           </h5>
         ) : (
           <div class="row">

diff --git a/src/shared/components/create-post.tsx b/src/shared/components/create-post.tsx
index 72d81705fe358f5bcd4efb6b954e0fd5935f67a5..756dd9b4a31e75d8e2be88567e6f95a7ee0cced6 100644 (file)
--- a/src/shared/components/create-post.tsx
+++ b/src/shared/components/create-post.tsx
@@ -111,7 +111,7 @@ export class CreatePost extends Component<any, CreatePostState> {
         />
         {this.state.loading ? (
           <h5>
-            <Spinner />
+            <Spinner large />
           </h5>
         ) : (
           <div class="row">

diff --git a/src/shared/components/create-private-message.tsx b/src/shared/components/create-private-message.tsx
index aceba6b97b6b5eca7bc1320554cf951517e3fd9a..0796d3e7d2d23c7b42b30622345f8c3c544f33e7 100644 (file)
--- a/src/shared/components/create-private-message.tsx
+++ b/src/shared/components/create-private-message.tsx
@@ -48,9 +48,8 @@ export class CreatePrivateMessage extends Component<
   constructor(props: any, context: any) {
     super(props, context);
     this.state = this.emptyState;
-    this.handlePrivateMessageCreate = this.handlePrivateMessageCreate.bind(
-      this
-    );
+    this.handlePrivateMessageCreate =
+      this.handlePrivateMessageCreate.bind(this);
 
     this.parseMessage = this.parseMessage.bind(this);
     this.subscription = wsSubscribe(this.parseMessage);
@@ -111,7 +110,7 @@ export class CreatePrivateMessage extends Component<
         />
         {this.state.loading ? (
           <h5>
-            <Spinner />
+            <Spinner large />
           </h5>
         ) : (
           <div class="row">

diff --git a/src/shared/components/icon.tsx b/src/shared/components/icon.tsx
index 5c61d9dc64ad0486e32d7f339812384cbe24485c..3d103c7cc94c2d6af4dfee0209b6eeaa2d9b22f2 100644 (file)
--- a/src/shared/components/icon.tsx
+++ b/src/shared/components/icon.tsx
@@ -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) {
     super(props, context);
   }
 
   render() {
-    return <Icon icon="spinner" classes="icon-spinner spin" />;
+    return (
+      <Icon
+        icon="spinner"
+        classes={`spin ${this.props.large && "spinner-large"}`}
+      />
+    );
   }
 }

diff --git a/src/shared/components/inbox.tsx b/src/shared/components/inbox.tsx
index 86d74871ba421a6eaca906c2f047a81cf98bcb3d..674c6642f1dbff6c680337872b7afa3f3c55a1c7 100644 (file)
--- a/src/shared/components/inbox.tsx
+++ b/src/shared/components/inbox.tsx
@@ -140,7 +140,7 @@ export class Inbox extends Component<any, InboxState> {
       <div class="container">
         {this.state.loading ? (
           <h5>
-            <Spinner />
+            <Spinner large />
           </h5>
         ) : (
           <div class="row">

diff --git a/src/shared/components/main.tsx b/src/shared/components/main.tsx
index 99c52fe8b6a6830e2e73107c10d8e55546a6aee0..0e781ef80b563765e9033c89cdc151d881bcd19b 100644 (file)
--- a/src/shared/components/main.tsx
+++ b/src/shared/components/main.tsx
@@ -550,7 +550,7 @@ export class Main extends Component<any, MainState> {
       <div class="main-content-wrapper">
         {this.state.loading ? (
           <h5>
-            <Spinner />
+            <Spinner large />
           </h5>
         ) : (
           <div>

diff --git a/src/shared/components/modlog.tsx b/src/shared/components/modlog.tsx
index 65c31ee384d4081e10e679a9c159babadabf9860..47fda24847440f208d7dcdb286c158adb306ca43 100644 (file)
--- a/src/shared/components/modlog.tsx
+++ b/src/shared/components/modlog.tsx
@@ -407,7 +407,7 @@ export class Modlog extends Component<any, ModlogState> {
         />
         {this.state.loading ? (
           <h5>
-            <Spinner />
+            <Spinner large />
           </h5>
         ) : (
           <div>

diff --git a/src/shared/components/person.tsx b/src/shared/components/person.tsx
index 5ded454c2c0e38fc71eac15f9bf6946760e006c0..8c046320a7bd52acc466a2f8749d5a63c8efd0d5 100644 (file)
--- a/src/shared/components/person.tsx
+++ b/src/shared/components/person.tsx
@@ -133,16 +133,13 @@ export class Person extends Component<any, PersonState> {
 
     this.state = this.emptyState;
     this.handleSortChange = this.handleSortChange.bind(this);
-    this.handleUserSettingsSortTypeChange = this.handleUserSettingsSortTypeChange.bind(
-      this
-    );
-    this.handleUserSettingsListingTypeChange = this.handleUserSettingsListingTypeChange.bind(
-      this
-    );
+    this.handleUserSettingsSortTypeChange =
+      this.handleUserSettingsSortTypeChange.bind(this);
+    this.handleUserSettingsListingTypeChange =
+      this.handleUserSettingsListingTypeChange.bind(this);
     this.handlePageChange = this.handlePageChange.bind(this);
-    this.handleUserSettingsBioChange = this.handleUserSettingsBioChange.bind(
-      this
-    );
+    this.handleUserSettingsBioChange =
+      this.handleUserSettingsBioChange.bind(this);
 
     this.handleAvatarUpload = this.handleAvatarUpload.bind(this);
     this.handleAvatarRemove = this.handleAvatarRemove.bind(this);
@@ -276,7 +273,7 @@ export class Person extends Component<any, PersonState> {
       <div class="container">
         {this.state.loading ? (
           <h5>
-            <Spinner />
+            <Spinner large />
           </h5>
         ) : (
           <div class="row">
@@ -1052,16 +1049,14 @@ export class Person extends Component<any, PersonState> {
   }
 
   handleUserSettingsSortTypeChange(val: SortType) {
-    this.state.saveUserSettingsForm.default_sort_type = Object.keys(
-      SortType
-    ).indexOf(val);
+    this.state.saveUserSettingsForm.default_sort_type =
+      Object.keys(SortType).indexOf(val);
     this.setState(this.state);
   }
 
   handleUserSettingsListingTypeChange(val: ListingType) {
-    this.state.saveUserSettingsForm.default_listing_type = Object.keys(
-      ListingType
-    ).indexOf(val);
+    this.state.saveUserSettingsForm.default_listing_type =
+      Object.keys(ListingType).indexOf(val);
     this.setState(this.state);
   }
 
@@ -1252,10 +1247,14 @@ export class Person extends Component<any, PersonState> {
     } else if (op == UserOperation.SaveUserSettings) {
       let data = wsJsonToRes<LoginResponse>(msg).data;
       UserService.Instance.login(data);
-      this.state.personRes.person_view.person.bio = this.state.saveUserSettingsForm.bio;
-      this.state.personRes.person_view.person.display_name = 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.personRes.person_view.person.bio =
+        this.state.saveUserSettingsForm.bio;
+      this.state.personRes.person_view.person.display_name =
+        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.setState(this.state);
 

diff --git a/src/shared/components/post.tsx b/src/shared/components/post.tsx
index f66b94eb1ae9d397af3f05785ecd86bce59ba2c4..b8aa0c30771730ab56740c631a6222d7c67c830c 100644 (file)
--- a/src/shared/components/post.tsx
+++ b/src/shared/components/post.tsx
@@ -252,7 +252,7 @@ export class Post extends Component<any, PostState> {
       <div class="container">
         {this.state.loading ? (
           <h5>
-            <Spinner />
+            <Spinner large />
           </h5>
         ) : (
           <div class="row">