Fixing too many large spinners (#337)

src/assets/css/main.css

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

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);

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>

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

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">

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">

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.handlePrivateMessageCreate =
-      this
+      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">

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"}`}
+      />
+    );
   }
 }

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">

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>

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>

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.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.handleUserSettingsBioChange = this.handleUserSettingsBioChange.bind(
+    this.handleUserSettingsBioChange =
-      this
+      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(
+    this.state.saveUserSettingsForm.default_sort_type =
-      SortType
+      Object.keys(SortType).indexOf(val);
-    ).indexOf(val);
     this.setState(this.state);
   }
 
   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);
   }
 
@@ -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.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.setState(this.state);
 

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">