mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-12-14 15:13:37 +08:00
f79c6aef8d
Some checks are pending
analyse-php / build (push) Waiting to run
lint-js / build (push) Waiting to run
lint-php / build (push) Waiting to run
test-js / build (push) Waiting to run
test-migrations / build (8.1) (push) Waiting to run
test-migrations / build (8.2) (push) Waiting to run
test-migrations / build (8.3) (push) Waiting to run
test-php / build (8.1) (push) Waiting to run
test-php / build (8.2) (push) Waiting to run
test-php / build (8.3) (push) Waiting to run
And disable button after submit. Added here because the import could take some time, so it's best to show an indicator to the user to show that something is happening, and help prevent duplicate submission or re-submit attempts.
38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import {Component} from "./component.js";
|
|
import {showLoading} from "../services/dom";
|
|
import {el} from "../wysiwyg/utils/dom";
|
|
|
|
/**
|
|
* Loading button.
|
|
* Shows a loading indicator and disables the button when the button is clicked,
|
|
* or when the form attached to the button is submitted.
|
|
*/
|
|
export class LoadingButton extends Component {
|
|
|
|
protected button!: HTMLButtonElement;
|
|
protected loadingEl: HTMLDivElement|null = null;
|
|
|
|
setup() {
|
|
this.button = this.$el as HTMLButtonElement;
|
|
const form = this.button.form;
|
|
|
|
const action = () => {
|
|
setTimeout(() => this.showLoadingState(), 10)
|
|
};
|
|
|
|
this.button.addEventListener('click', action);
|
|
if (form) {
|
|
form.addEventListener('submit', action);
|
|
}
|
|
}
|
|
|
|
showLoadingState() {
|
|
this.button.disabled = true;
|
|
|
|
if (!this.loadingEl) {
|
|
this.loadingEl = el('div', {class: 'inline block'}) as HTMLDivElement;
|
|
showLoading(this.loadingEl);
|
|
this.button.after(this.loadingEl);
|
|
}
|
|
}
|
|
} |