From 2d8be72b33bf058048f8e1054a8b822a6373ca4b Mon Sep 17 00:00:00 2001
From: Dessalines <dessalines@users.noreply.github.com>
Date: Sat, 17 Jul 2021 16:21:31 -0400
Subject: [PATCH] Fixing too many large spinners (#337)

---
 src/assets/css/main.css                       |  2 +-
 src/shared/components/admin-settings.tsx      | 11 ++++--
 src/shared/components/communities.tsx         |  2 +-
 src/shared/components/community.tsx           |  6 +--
 src/shared/components/create-community.tsx    |  2 +-
 src/shared/components/create-post.tsx         |  2 +-
 .../components/create-private-message.tsx     |  7 ++--
 src/shared/components/icon.tsx                | 13 ++++++-
 src/shared/components/inbox.tsx               |  2 +-
 src/shared/components/main.tsx                |  2 +-
 src/shared/components/modlog.tsx              |  2 +-
 src/shared/components/person.tsx              | 39 +++++++++----------
 src/shared/components/post.tsx                |  2 +-
 13 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 45b34cee..80eb20b1 100644
--- 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 19856f3c..d9aa74b1 100644
--- 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 1004da5d..875ceeac 100644
--- 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 8852b675..4a82da61 100644
--- 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 52c28330..c8e3111e 100644
--- 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 72d81705..756dd9b4 100644
--- 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 aceba6b9..0796d3e7 100644
--- 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 5c61d9dc..3d103c7c 100644
--- 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 86d74871..674c6642 100644
--- 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 99c52fe8..0e781ef8 100644
--- 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 65c31ee3..47fda248 100644
--- 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 5ded454c..8c046320 100644
--- 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 f66b94eb..b8aa0c30 100644
--- 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">