Stop the table flickering away on every edit save

load() unconditionally set loading = true, which unmounts the whole
v-else table (the "Chargement…" paragraph takes its place) every time
-- including the background refresh after saving a line, which is
exactly the scroll-resetting, full-table-disappears flicker Vue's
keyed diffing is supposed to prevent. The post-edit refresh
(dialog:afterclose) now calls load(false): rows get reassigned in
place, and Vue patches only what changed.

Verified with a real click (not synthetic JS events, which don't
reliably trigger Drupal's mousedown-bound AJAX submit in headless
testing): same .figli-table-wrap DOM node before/after, "Chargement…"
never appeared.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-04 13:10:55 +02:00
co-authored by Claude Sonnet 5
parent 4636fc3522
commit 059d31f63d
@@ -336,8 +336,16 @@
}
});
},
async load() {
this.loading = true;
// showLoading defaults to true for the initial mount, where there's
// nothing on screen yet to preserve. A post-edit refresh passes
// false: flipping `loading` back to true would unmount the whole
// v-else table (the "Chargement…" paragraph takes its place) and
// remount it from scratch once the fetch resolves -- exactly the
// full-table flicker/scroll-reset Vue's keyed diffing exists to
// avoid. Reassigning `rows` in place lets Vue patch just the rows
// that actually changed.
async load(showLoading = true) {
if (showLoading) this.loading = true;
this.error = null;
try {
const { data, includedMap } = await fetchAllLignes();
@@ -345,13 +353,13 @@
} catch (err) {
this.error = err.message;
} finally {
this.loading = false;
if (showLoading) this.loading = false;
}
},
},
mounted() {
this.load();
jQuery(document).on('dialog:afterclose', () => this.load());
jQuery(document).on('dialog:afterclose', () => this.load(false));
},
};