Adding a loading indicator for post community searching. Fixes #692 (#794)

src/shared/components/modlog.tsx

@@ -38,7 +38,7 @@ import {
   amAdmin,
   amMod,
   auth,
-  choicesModLogConfig,
+  choicesConfig,
   debounce,
   fetchLimit,
   fetchUsers,
@@ -797,7 +797,7 @@ export class Modlog extends Component<any, ModlogState> {
     if (isBrowser()) {
       let selectId: any = document.getElementById("filter-user");
       if (selectId) {
-        this.userChoices = new Choices(selectId, choicesModLogConfig);
+        this.userChoices = new Choices(selectId, choicesConfig);
         this.userChoices.passedElement.element.addEventListener(
           "choice",
           (e: any) => {
@@ -836,7 +836,7 @@ export class Modlog extends Component<any, ModlogState> {
     if (isBrowser()) {
       let selectId: any = document.getElementById("filter-mod");
       if (selectId) {
-        this.modChoices = new Choices(selectId, choicesModLogConfig);
+        this.modChoices = new Choices(selectId, choicesConfig);
         this.modChoices.passedElement.element.addEventListener(
           "choice",
           (e: any) => {

src/shared/components/post/post-form.tsx

@@ -80,6 +80,7 @@ interface PostFormState {
   crossPosts: Option<PostView[]>;
   loading: boolean;
   imageLoading: boolean;
+  communitySearchLoading: boolean;
   previewMode: boolean;
 }
 
@@ -99,6 +100,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     }),
     loading: false,
     imageLoading: false,
+    communitySearchLoading: false,
     previewMode: false,
     suggestedTitle: None,
     suggestedPosts: None,
@@ -366,7 +368,11 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 className="col-sm-2 col-form-label"
                 htmlFor="post-community"
               >
-                {i18n.t("community")}
+                {this.state.communitySearchLoading ? (
+                  <Spinner />
+                ) : (
+                  i18n.t("community")
+                )}
               </label>
               <div className="col-sm-10">
                 <select
@@ -668,6 +674,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           },
           false
         );
+        this.choices.passedElement.element.addEventListener("search", () => {
+          this.setState({ communitySearchLoading: true });
+        });
         this.choices.passedElement.element.addEventListener(
           "search",
           debounce(async (e: any) => {
@@ -680,6 +689,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 "label",
                 true
               );
+              this.setState({ communitySearchLoading: false });
             } catch (err) {
               console.log(err);
             }

src/shared/utils.ts

@@ -1327,44 +1327,11 @@ export const choicesConfig = {
   shouldSort: false,
   searchResultLimit: fetchLimit,
   classNames: {
-    containerOuter: "choices",
+    containerOuter: "choices custom-select px-0",
-    containerInner: "choices__inner bg-secondary border-0",
-    input: "form-control",
-    inputCloned: "choices__input--cloned",
-    list: "choices__list",
-    listItems: "choices__list--multiple",
-    listSingle: "choices__list--single",
-    listDropdown: "choices__list--dropdown",
-    item: "choices__item bg-secondary",
-    itemSelectable: "choices__item--selectable",
-    itemDisabled: "choices__item--disabled",
-    itemChoice: "choices__item--choice",
-    placeholder: "choices__placeholder",
-    group: "choices__group",
-    groupHeading: "choices__heading",
-    button: "choices__button",
-    activeState: "is-active",
-    focusState: "is-focused",
-    openState: "is-open",
-    disabledState: "is-disabled",
-    highlightedState: "text-info",
-    selectedState: "text-info",
-    flippedState: "is-flipped",
-    loadingState: "is-loading",
-    noResults: "has-no-results",
-    noChoices: "has-no-choices",
-  },
-};
-
-export const choicesModLogConfig = {
-  shouldSort: false,
-  searchResultLimit: fetchLimit,
-  classNames: {
-    containerOuter: "choices mb-2 custom-select px-0",
     containerInner:
       "choices__inner bg-secondary border-0 py-0 modlog-choices-font-size",
     input: "form-control",
-    inputCloned: "choices__input--cloned w-100",
+    inputCloned: "choices__input--cloned",
     list: "choices__list",
     listItems: "choices__list--multiple",
     listSingle: "choices__list--single py-0",