DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

feat(autosave): don't show loader when response is very fast

Browse source
This commit is contained in:
Colin Darie 2023-01-23 14:03:07 +01:00
parent 587a4c4d95
commit c6bdfc7401
1 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
app/javascript/controllers/autosave_controller.ts
View file

@ -38,6 +38,7 @@ export class AutosaveController extends ApplicationController {
#latestPromise = Promise.resolve(); #latestPromise = Promise.resolve();
#needsRetry = false; #needsRetry = false;
#pendingPromiseCount = 0; #pendingPromiseCount = 0;
#spinnerTimeoutId?: ReturnType<typeof setTimeout>;
connect() { connect() {
this.#latestPromise = Promise.resolve(); this.#latestPromise = Promise.resolve();
@ -88,6 +89,8 @@ export class AutosaveController extends ApplicationController {
(!this.saveOnInput && isTextInputElement(target)) (!this.saveOnInput && isTextInputElement(target))
) { ) {
this.enqueueAutosaveRequest(); this.enqueueAutosaveRequest();
this.showConditionnalSpinner(target);
} }
} }
} }
@ -102,19 +105,30 @@ export class AutosaveController extends ApplicationController {
) { ) {
this.debounce(this.enqueueAutosaveRequest, AUTOSAVE_DEBOUNCE_DELAY); this.debounce(this.enqueueAutosaveRequest, AUTOSAVE_DEBOUNCE_DELAY);
if (target.dataset.dependentConditions) { this.showConditionnalSpinner(target);
// do not do anything is next DOM element has class "new-laoder"
if (!target.nextElementSibling?.classList.contains('spinner')) {
const spinner = document.createElement('div');
spinner.classList.add('spinner');
spinner.setAttribute('aria-live', 'live');
spinner.setAttribute('aria-label', 'Chargement en cours…');
target.after(spinner);
}
}
} }
} }
private showConditionnalSpinner(target: HTMLInputElement) {
if (target.dataset.dependentConditions) {
this.showSpinner(target);
return;
}
}
private showSpinner(champElement: HTMLElement) {
this.#spinnerTimeoutId = setTimeout(() => {
// do not do anything if there is already a spinner
if (!champElement.nextElementSibling?.classList.contains('spinner')) {
const spinner = document.createElement('div');
spinner.classList.add('spinner');
spinner.setAttribute('aria-live', 'live');
spinner.setAttribute('aria-label', 'Chargement en cours…');
champElement.after(spinner);
}
}, 200);
}
private get saveOnInput() { private get saveOnInput() {
return !!this.form?.dataset.saveOnInput; return !!this.form?.dataset.saveOnInput;
} }
@ -134,6 +148,7 @@ export class AutosaveController extends ApplicationController {
this.#pendingPromiseCount -= 1; this.#pendingPromiseCount -= 1;
if (this.#pendingPromiseCount == 0) { if (this.#pendingPromiseCount == 0) {
this.globalDispatch('autosave:end'); this.globalDispatch('autosave:end');
clearTimeout(this.#spinnerTimeoutId);
} }
} }