From 059d31f63d85a319a768b9f8aabb9cfa9a3f09ac Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Fri, 4 Sep 2026 13:10:55 +0200
Subject: [PATCH] Stop the table flickering away on every edit save
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../custom/figli_compta_ledger/js/home.js        | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/modules/custom/figli_compta_ledger/js/home.js b/web/modules/custom/figli_compta_ledger/js/home.js
index 2ccb303..913f195 100644
--- a/web/modules/custom/figli_compta_ledger/js/home.js
+++ b/web/modules/custom/figli_compta_ledger/js/home.js
@@ -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));
     },
   };