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() { // showLoading defaults to true for the initial mount, where there's
this.loading = true; // 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; this.error = null;
try { try {
const { data, includedMap } = await fetchAllLignes(); const { data, includedMap } = await fetchAllLignes();
@@ -345,13 +353,13 @@
} catch (err) { } catch (err) {
this.error = err.message; this.error = err.message;
} finally { } finally {
this.loading = false; if (showLoading) this.loading = false;
} }
}, },
}, },
mounted() { mounted() {
this.load(); this.load();
jQuery(document).on('dialog:afterclose', () => this.load()); jQuery(document).on('dialog:afterclose', () => this.load(false));
}, },
}; };