Changeset e667d26 in Klonkt for src/assets/js/guardian.js

Timestamp:

08/09/2026 07:28:31 AM (4 weeks ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

c832064

Parents:

82c3356

git-author:

Robin <roboburr@…> (08/09/2026 07:28:29 AM)

git-committer:

roboburr <roboburr@…> (08/09/2026 07:28:31 AM)

Message:

Een levende klok in het antwoord maakte de lange poll een lus (9-8)

Barts melding: de browser komt in een feedback-lus van ongeveer een seconde, en
de scrollpositie wordt vermalen. Dat is mijn fout van een uur eerder, en de
oorzaak is scherper dan hij lijkt.

Het paneel kreeg gisteren een inhouds-ETag, en de paneelstate bevat -- bevatte --
ageMs: de leeftijd van de oudste oppik, uitgerekend als now - tijdstip.
Daardoor verschilde elk antwoord een paar milliseconden van het vorige, kon de
ETag nooit gelijk zijn, kwam de 304 nooit, keerde de lange poll meteen terug, en
tekende het paneel zich stuk terwijl Bart scrollde.

EEN LEVENDE KLOK MAAKT EEN ANTWOORD ONVERGELIJKBAAR MET ZICHZELF. Dat is de les,
en hij raakt elk veld dat we ooit nog toevoegen. Er staat nu een toets op die
hetzelfde antwoord twee keer opvraagt met een halve seconde ertussen en eist dat
het identiek is.

De reparatie zit bij de BRON, niet in de ETag: het antwoord draagt nu het
TIJDSTIP (oldestPickupAt) en de client rekent de leeftijd uit. Dat is ook wat het
altijd al was -- een weergavedetail. De ETag uitzonderingen laten maken zou een
tweede beschrijving zijn van "wat telt als veranderd", precies wat ik gisteren
als argument tegen een cursor gebruikte.

TWEE GRENDELS ERBIJ, aan de kant die de gebruiker merkt:

• Zelfde inhoud wordt niet hertekend. De 304 hoort dit af te vangen, maar een enkel onstabiel veld zette het scherm aan het knipperen; dit vangt de volgende.
• Een lange poll die binnen twee seconden terugkeert wacht drie seconden voordat hij opnieuw vraagt. Een poll die niet wacht mag nooit een lus worden -- anders vervangt een defect een tik per 45 seconden door duizend per minuut.

En de scrollpositie overleeft een verversing: meten en terugzetten rond
renderAll. Dat is het verschil tussen een scherm dat bijwerkt en een scherm dat
onder je handen wegschuift.

Suite 782/782; met de klok terug valt hij om.

File:

• src/assets/js/guardian.js (modified) (5 diffs)

src/assets/js/guardian.js

@@ -108 +108 @@
    */
   function helpState(h) {
-    var st = h.state || { open: true, pickedUpBy: [], handled: null, ageMs: null };
+    var st = h.state || { open: true, pickedUpBy: [], handled: null, oldestPickupAt: null };
     var box = el('div', 'g-help-state');
 
@@ -133 +133 @@
     // Oud, maar niet weg. Dit is het verschil tussen 'er is iemand mee bezig' en
     // 'er was ooit iemand mee bezig'.
-    if (st.ageMs != null && st.ageMs > 3600000) {
-      box.appendChild(el('div', 'g-help-age small', ago(st.ageMs)));
+    // De leeftijd wordt HIER uitgerekend, niet op de server: een verschil met
+    // `now` in het antwoord maakt dat antwoord elke milliseconde anders, en dan
+    // kan de ETag nooit gelijk zijn.
+    var oud = st.oldestPickupAt ? (Date.now() - Date.parse(st.oldestPickupAt)) : null;
+    if (oud != null && !isNaN(oud) && oud > 3600000) {
+      box.appendChild(el('div', 'g-help-age small', ago(oud)));
     }
 
@@ -894 +898 @@
   }
 
+
+  // De scrollpositie overleeft een verversing (Barts melding, 9-8). renderAll
+  // bouwt lijsten opnieuw op; staat de pagina daarbij even korter, dan springt
+  // de browser omhoog en ben je kwijt waar je was. Meten en terugzetten is
+  // genoeg -- en het is het verschil tussen een scherm dat bijwerkt en een
+  // scherm dat onder je handen wegschuift.
+  function metBehoudVanScroll(fn) {
+    var y = window.scrollY || document.documentElement.scrollTop || 0;
+    fn();
+    if (y) window.scrollTo(0, y);
+  }
+
   function renderAll() { renderHelp(); renderPending(); renderWards(); }
 
@@ -963 +979 @@
     return fetch('/guardian/api/state?site=' + encodeURIComponent(S.site))
       .then(function (r) { return r.json(); })
-      .then(function (s) { if (s && !s.error) { S = s; T = s.strings || T; renderAll(); } })
+      .then(function (s) { if (s && !s.error) { S = s; T = s.strings || T; metBehoudVanScroll(renderAll); } })
       .then(loadFeed).then(loadFollowReqs);
   }
@@ -978 +994 @@
   // opnieuw getekend.
   var pollBezig = false;
+  var laatsteState = null;   // de vorige body, om onnodig hertekenen te herkennen
+
   function longPoll() {
     if (pollBezig || document.hidden) return;
     pollBezig = true;
+    var t0 = Date.now();
     fetch('/guardian/api/state?wait=25&site=' + encodeURIComponent(S.site))
       .then(function (r) {
         pollBezig = false;
         if (r.status === 304) return null;          // stilte
-        return r.json().then(function (s) {
-          if (s && !s.error) { S = s; T = s.strings || T; renderAll(); }
+        return r.text().then(function (tekst) {
+          // ZELFDE INHOUD, NIET HERTEKENEN. De 304 zou dit al moeten afvangen,
+          // maar een enkel veld dat per verzoek verandert (er stond een levende
+          // klok in) maakt elke ETag anders, en dan tekent het paneel zichzelf
+          // stuk terwijl je scrollt. Dit is de tweede grendel, aan de kant die
+          // de gebruiker merkt.
+          if (tekst === laatsteState) return null;
+          laatsteState = tekst;
+          var s; try { s = JSON.parse(tekst); } catch (e) { return null; }
+          if (s && !s.error) { S = s; T = s.strings || T; metBehoudVanScroll(renderAll); }
           return loadFeed().then(loadFollowReqs);
         });
       })
-      .then(function () { setTimeout(longPoll, 200); })
+      .then(function () {
+        // EEN LANGE POLL DIE METEEN TERUGKEERT MAG GEEN LUS WORDEN. Wachtte de
+        // server niet (een fout, een tussenliggende proxy, iets wat we nog niet
+        // weten), dan houden we zelf de rem erop. Anders vervangt een defect de
+        // ene tik van 45 seconden door duizend per minuut.
+        var snel = Date.now() - t0 < 2000;
+        setTimeout(longPoll, snel ? 3000 : 200);
+      })
       .catch(function () {
         // Netwerk weg of server herstart: niet meteen opnieuw beuken.