From b9226f695c827a4b16719fd0c752801f4e768e6c Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Sat, 26 Sep 2026 23:21:27 -0700
Subject: Keyed morph: drop stale nodes before placing survivors, so a repaint
 moves nothing.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With stale nodes still in front, every kept row's position was off by the
stale count and each one was pulled out and re-inserted — a remove and an
add per row per repaint. The feed's window evicting rows at the top did
this to every mounted row on every scroll step; a moved <video> leaves the
document and comes back, restarting its loading (one clip was fetched 61
times in 40 seconds), and images were refetched. Measured with a
MutationObserver on the live tab: 160 of 179 row additions during a
20-second scroll were the same key going out and back in.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VhUKyXKtsJ67QAFfb7QR9D
---
 src/app.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'src/app.js')

diff --git a/src/app.js b/src/app.js
index 8a96334..e507776 100644
--- a/src/app.js
+++ b/src/app.js
@@ -271,6 +271,18 @@ const allKeyed = (nodes) => nodes.length > 0
 function morphKeyed(parent, cur, next) {
   const byKey = new Map();
   for (const n of cur) if (n.nodeType === 1 && n.hasAttribute('data-key')) byKey.set(n.getAttribute('data-key'), n);
+  // Drop what the new render no longer has BEFORE placing the rest: with
+  // stale nodes still in front, every survivor's position was off by the
+  // stale count and each one was pulled out and re-inserted — a move per row
+  // per repaint (the feed's window evicting rows at the top did this to all
+  // the rows below on every scroll), and a moved <video> is taken out of
+  // the document and back, which restarts its loading.
+  const wanted = new Set(next.map((b) => b.getAttribute('data-key')));
+  for (const n of cur) {
+    if (n.parentNode !== parent) continue;
+    const k = n.nodeType === 1 ? n.getAttribute('data-key') : null;
+    if (k == null || !wanted.has(k)) n.remove();
+  }
   const kept = new Set();
   for (let i = 0; i < next.length; i++) {
     const b = next[i];
-- 
cgit v1.2.3