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:
@@ -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));
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user