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

This commit is contained in:
Dessalines 2022-09-22 14:13:22 -04:00 committed by GitHub
parent 67c83ece5b
commit 93bee57c4c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 39 deletions

View file

@ -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) => {

View file

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

View file

@ -1327,44 +1327,11 @@ export const choicesConfig = {
shouldSort: false,
searchResultLimit: fetchLimit,
classNames: {
containerOuter: "choices",
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",
containerOuter: "choices 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",