Changeset 389aa99 in Klonkt

Timestamp:

06/20/2026 03:20:00 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

73b41eb

Parents:

2fc9b7f

Message:

fix(nav): no "bare content" on fast/repeated back-forward

The popstate handler fired an htmx.ajax immediately on every back/forward →
on fast repeated navigation requests overlapped and a slow old response could
overwrite a newer page ("bare content"). Now: doNav() aborts any pending
request on #pcms-main first, and popstate is debounced (90ms) so fast
repeated back-forward only fetches the LAST destination. Click navigation
uses the same abort-first doNav().

Co-Authored-By: Claude <noreply@…>

File:

• src/views/shell.ejs (modified) (3 diffs)

src/views/shell.ejs

@@ -478 +478 @@
 
   var lastPath = location.pathname + location.search;
+  var navTimer = null;
+
+  // Eén plek voor alle programmatische navigatie-swaps. Annuleert eerst een nog
+  // lopende request op #pcms-main (anti-race: bij snel klikken/terug-gaan kan een
+  // trage oude response anders een nieuwe pagina overschrijven → "kale content").
+  function doNav(dest) {
+    try { window.htmx.trigger('#pcms-main', 'htmx:abort'); } catch (_) {}
+    window.htmx.ajax('GET', dest, { target: '#pcms-main', swap: 'innerHTML' });
+  }
 
   document.addEventListener('click', function (e) {
@@ -492 +501 @@
     if (dest !== lastPath) history.pushState({ b: 1 }, '', dest);
     lastPath = dest;
-    window.htmx.ajax('GET', dest, { target: '#pcms-main', swap: 'innerHTML' });
+    if (navTimer) { clearTimeout(navTimer); navTimer = null; }
+    doNav(dest);
     try { window.scrollTo(0, 0); } catch (_) {}
   });
@@ -500 +510 @@
     if (here === lastPath) return;
     lastPath = here;
-    window.htmx.ajax('GET', here, { target: '#pcms-main', swap: 'innerHTML' });
+    // Debounce: bij heel snel/herhaald terug-vooruit niet elke tussenpagina ophalen,
+    // alleen de LAATSTE bestemming. Voorkomt overlappende swaps ("kale content").
+    if (navTimer) clearTimeout(navTimer);
+    navTimer = setTimeout(function () {
+      navTimer = null;
+      doNav(location.pathname + location.search);
+    }, 90);
   });