Feed: only the rows near the viewport are in the DOM, however far you scroll.

A long scroll left hundreds of rows mounted, and every repaint (a zap
count, a profile landing, the thirty-second sync) rebuilt and diffed all
of them — the slowdown deep in the feed. Rows beyond two and a half
screens either side of the viewport are now replaced by a spacer at their
measured height, so the page keeps its length (scrollbar, Back, arrival
anchoring behave as before) while a repaint touches a few dozen rows.
After svelte-virtual-list: measure after paint, estimate unmeasured rows
at the running average, hold the reader's row still when a measurement
corrects an estimate. Applies to the profile notes list too.

Tests: feed-window-dom (120 posts, 27,800px page, 12–24 rows mounted,
anchor held, spacers both sides); feed-live looks at the top after
scrolling up; the moderation test's stub relay no longer lets real posts in.

Co-Authored-By: Claude Fable 5.1 <[email protected]>

5 files changed, 233 insertions, 12 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index 7cd8ce3..65dec9d 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -3400,6 +3400,7 @@ export function messagesFeature(ctx) {
   if (typeof window !== 'undefined') {
     window.addEventListener('scroll', () => {
       if (!ui.profilePk && (!(ui.chatOpen && ui.msgView === 'feed') || ui.noteThread)) return;
+      windowScrolled(ui.profilePk ? notesCache.get(ui.profilePk) : feed);
       // back at the top by yourself: the new posts are under your eyes, so
       // the notice has done its job (only the pill repaints — the rows are
       // keyed and stay put, so nothing moves under a finger)
@@ -4399,6 +4400,93 @@ export function messagesFeature(ctx) {
   // stays where it was, however much was inserted above it. Measured after
   // the paint, so a browser that anchored the scroll itself isn't corrected
   // twice.
+  // ---- windowing: only the rows near the viewport are in the DOM ----------
+  // A long scroll used to leave hundreds of rows mounted, and every repaint
+  // (a zap count landing, the thirty-second sync) rebuilt and diffed all of
+  // them — the slowdown you feel deep in the feed. Now a spacer stands in
+  // for the rows above and below the window at their measured heights, so
+  // the page keeps its length (scrollbar, Back, anchoring all behave), while
+  // a repaint touches a few dozen rows however far you have scrolled. The
+  // shape is svelte-virtual-list's: measure after paint, put unmeasured rows
+  // in at the running average, and hold the reader's row still when a
+  // measurement corrects an estimate.
+  const WINDOW_AHEAD = 2.5; // screens kept rendered beyond the viewport, each way
+  const WINDOW_MIN = 30; // below this many rows, no windowing at all
+  const ROW_GAP = 1; // the hairline between rows
+  function listWindow(c, list) {
+    const H = typeof window === 'undefined' ? 0 : window.innerHeight;
+    if (!H || list.length <= WINDOW_MIN) return { start: 0, end: list.length, top: 0, bottom: 0 };
+    const heights = c.heights || (c.heights = new Map());
+    let sum = 0, n = 0;
+    for (const v of heights.values()) { sum += v; n++; }
+    const avg = n ? sum / n : 200;
+    const y0 = (window.scrollY || 0) - (c.listTop || 0); // viewport top, relative to the list
+    const lo = y0 - WINDOW_AHEAD * H, hi = y0 + (1 + WINDOW_AHEAD) * H;
+    let y = 0, start = 0, end = list.length, top = 0, bottom = 0;
+    for (let i = 0; i < list.length; i++) {
+      const rowH = (heights.get(list[i].id) || avg) + ROW_GAP;
+      if (y + rowH <= lo) { top += rowH; start = i + 1; }
+      else if (y >= hi) { bottom += rowH; if (end === list.length) end = i; }
+      y += rowH;
+    }
+    return { start, end, top, bottom };
+  }
+  // The rows for a windowed list: hairline + row for what is in the window,
+  // a spacer either side. Every child keyed, so the morph moves by key.
+  function windowedRows(c, list, rowOf) {
+    const win = listWindow(c, list);
+    c.win = win;
+    const hr = (ev) => h('div', { 'data-key': 'hr:' + ev.id, style: 'height:1px;background:var(--border,rgba(128,128,128,.18));margin:0 -14px' });
+    const out = [];
+    if (win.top) out.push(h('div', { 'data-key': 'win-top', class: 'feed-spacer', style: 'height:' + Math.round(win.top) + 'px' }));
+    for (let i = win.start; i < win.end; i++) {
+      if (i) out.push(hr(list[i]));
+      out.push(rowOf(list[i]));
+    }
+    if (win.bottom) out.push(h('div', { 'data-key': 'win-bottom', class: 'feed-spacer', style: 'height:' + Math.round(win.bottom) + 'px' }));
+    measureRows(c);
+    return out;
+  }
+  // After the paint: remember each mounted row's height and where the list
+  // starts. A spacer that was built on estimates gets its real numbers on a
+  // repaint that holds the reader's row still.
+  function measureRows(c, { repaint = true } = {}) {
+    if (c._measuring || typeof requestAnimationFrame === 'undefined') return;
+    c._measuring = true;
+    requestAnimationFrame(() => {
+      c._measuring = false;
+      const changed = measureNow(c);
+      if (changed && repaint && c.win && (c.win.top || c.win.bottom)) holdScroll(render);
+    });
+  }
+  function measureNow(c) {
+    const list = document.querySelector('.notes-feed');
+    if (!list) return false;
+    c.listTop = list.getBoundingClientRect().top + (window.scrollY || 0);
+    const heights = c.heights || (c.heights = new Map());
+    let changed = false;
+    for (const r of list.querySelectorAll(':scope > .row[data-key]')) {
+      const hgt = r.getBoundingClientRect().height;
+      const key = r.getAttribute('data-key');
+      if (hgt > 0 && Math.abs((heights.get(key) || 0) - hgt) > 0.5) { heights.set(key, hgt); changed = true; }
+    }
+    return changed;
+  }
+  // On scroll: when the window should move, repaint with the reader's row
+  // held still. One frame at a time.
+  let windowRaf = 0;
+  function windowScrolled(c) {
+    if (!c || !c.win || windowRaf) return;
+    windowRaf = requestAnimationFrame(() => {
+      windowRaf = 0;
+      measureNow(c);
+      const list = c.winList ? c.winList() : null;
+      if (!list) return;
+      const next = listWindow(c, list);
+      if (next.start !== c.win.start || next.end !== c.win.end) holdScroll(render);
+    });
+  }
+
   function holdScroll(paint) {
     let key = null, top = 0;
     try {
@@ -4443,7 +4531,9 @@ export function messagesFeature(ctx) {
     feedAheadTimer = setTimeout(() => {
       feedAheadTimer = null;
       if (c !== feed || !ui.chatOpen || ui.msgView !== 'feed' || ui.profilePk || ui.noteThread) return;
-      const last = document.querySelector('.notes-feed > .row[data-key]:last-child');
+      if (c.win && c.win.bottom) return; // rows below are held back by the window, not by paging
+      const rows = document.querySelectorAll('.notes-feed > .row[data-key]');
+      const last = rows[rows.length - 1];
       if (last && last.getBoundingClientRect().bottom < window.innerHeight * 4) loadOlderFeed().catch(() => {});
     }, 100);
   }
@@ -6606,10 +6696,7 @@ export function messagesFeature(ctx) {
         return h('div', { class: 'col', style: 'gap:8px' },
           h('div', { class: 'small muted', style: 'padding:0 2px' }, t('profNotesTitle')),
           h('div', { class: 'card col notes-feed', style: 'gap:0' },
-            ...c.notes.flatMap((ev, i) => [
-              i ? h('div', { style: 'height:1px;background:var(--border,rgba(128,128,128,.18));margin:0 -14px' }) : null,
-              noteRow(pk, ev, name),
-            ])),
+            ...(c.winList = () => c.notes, windowedRows(c, c.notes, (ev) => keyed(noteRow(pk, ev, name), ev.id)))),
           c.loadingMore
             ? h('div', { class: 'row gap6', style: 'justify-content:center;padding:4px 0' },
                 h('span', { class: 'spinner sm' }))
@@ -6769,10 +6856,9 @@ export function messagesFeature(ctx) {
     // Every child keyed by its post, hairlines included, so the morph
     // reconciles the list by post: a new one at the top is inserted as its
     // own node; the rest keep theirs.
-    const rows = visible.slice(0, c.shown || FEED_PAGE).flatMap((ev, i) => [
-      i ? h('div', { 'data-key': 'hr:' + ev.id, style: 'height:1px;background:var(--border,rgba(128,128,128,.18));margin:0 -14px' }) : null,
-      c.booting ? keyed(noteRow(ev.pubkey, ev, displayName(ev.pubkey)), ev.id) : feedRow(c, ev),
-    ]);
+    const list = visible.slice(0, c.shown || FEED_PAGE);
+    c.winList = () => c.notes.filter((ev) => !hidden(ev)).slice(0, c.shown || FEED_PAGE);
+    const rows = windowedRows(c, list, (ev) => (c.booting ? keyed(noteRow(ev.pubkey, ev, displayName(ev.pubkey)), ev.id) : feedRow(c, ev)));
     // Posts that went in above you while you were reading. A floating pill
     // that says how many are up there; the tap takes you up to them.
     // Keyed, so the morph keeps this very node while the count changes —
diff --git a/src/style.css b/src/style.css
index 06ba80c..b136432 100644
--- a/src/style.css
+++ b/src/style.css
@@ -809,6 +809,9 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
 /* the profile notes feed: page-scrolled (no inner scrollbox); on phones it
    runs edge to edge — the card walls step outside #app's padding */
 .notes-feed { padding: 2px 14px; }
+/* rows scrolled well out of view are not in the DOM: a spacer stands in
+   at their measured height, so the page keeps its length (see listWindow) */
+.feed-spacer { display: block; flex: 0 0 auto; }
 @media (max-width: 520px) {
   .notes-feed {
     margin-left: -16px; margin-right: -16px;
diff --git a/tools/feed-live-test.js b/tools/feed-live-test.js
index 7732045..9f98fde 100644
--- a/tools/feed-live-test.js
+++ b/tools/feed-live-test.js
@@ -287,7 +287,10 @@ try {
   await away(() => Array.from({ length: 25 }, (_, i) => signed('LONG AWAY ' + (i + 1), 0)));
   const a3 = await rowAt(heldLong.text);
   check('many new posts still preserve the reading position', !!a3 && Math.abs(a3.top - heldLong.top) <= 2, JSON.stringify({ heldLong, a3 }));
-  check('...with the newest posts above and a notice', /LONG AWAY 1\b/.test(await topRow()) && !!(await page.$('.feed-new-pill')), (await topRow()).slice(0, 40));
+  check('...with a notice', !!(await page.$('.feed-new-pill')));
+  // the page top is not mounted from down here (windowing): go up to look
+  await page.evaluate(() => window.scrollTo(0, 0)); await sleep(600);
+  check('...and the newest posts at the top', /LONG AWAY 1\b/.test(await topRow()), (await topRow()).slice(0, 40));
 
   check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | '));
 } finally { await browser.close(); server.stop(true); }
diff --git a/tools/feed-window-dom-test.js b/tools/feed-window-dom-test.js
new file mode 100644
index 0000000..d7a2f8c
--- /dev/null
+++ b/tools/feed-window-dom-test.js
@@ -0,0 +1,127 @@
+// Windowing: however far you scroll, only the rows near the viewport are in
+// the DOM — a spacer stands in for the rest at their measured height, so the
+// page keeps its length, the row under your eyes never moves when the window
+// shifts, and scrolling back up brings the top posts back.
+// Run: bun tools/feed-window-dom-test.js
+import puppeteer from 'puppeteer-core';
+import { cacheKeyFor } from '../src/wallet.js';
+import { generateSecretKey, getPublicKey, finalizeEvent } from 'nostr-tools/pure';
+import { buildHtml } from '../build.js';
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+let ok = true;
+const check = (n, c, d = '') => { console.log(` ${c ? '✓' : '✗'} ${n}${d ? ' — ' + d : ''}`); if (!c) ok = false; };
+const SK = generateSecretKey();
+const AUTHOR = getPublicKey(SK);
+const now = Math.floor(Date.now() / 1000);
+// 120 cached posts of wildly different heights
+const seeded = Array.from({ length: 120 }, (_, i) => finalizeEvent({
+  kind: 1, created_at: now - 100 - i * 60, tags: [],
+  content: 'post number ' + (i + 1) + ' ' + (i % 3 === 0 ? 'short' : i % 3 === 1 ? 'a medium length post about nothing in particular, '.repeat(3) : 'a long one. '.repeat(30)),
+}, SK));
+
+const html = await buildHtml({ minify: true, pwa: false });
+const server = Bun.serve({ port: 5305, fetch: (req) => {
+  const path = new URL(req.url).pathname;
+  if (path.startsWith('/punks')) return new Response(Bun.file('dist' + path));
+  return new Response(html, { headers: { 'content-type': 'text/html' } });
+} });
+const browser = await puppeteer.launch({ executablePath: '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox'] });
+const page = await browser.newPage();
+// the stub relay holds every post: a kind-1 request is answered from it
+// (honouring until/limit), everything else gets a bare EOSE
+await page.evaluateOnNewDocument((all) => {
+  const Real = window.WebSocket;
+  window.WebSocket = function (...a) {
+    const ws = new Real(...a);
+    const send = ws.send.bind(ws);
+    ws.send = (data) => {
+      try {
+        const m = JSON.parse(data);
+        if (m[0] === 'REQ') {
+          const f = m[2] || {};
+          const evs = (f.kinds || []).includes(1) && !f['#e'] && !f.ids
+            ? all.filter((e) => (!f.until || e.created_at <= f.until) && (!f.since || e.created_at >= f.since)).slice(0, f.limit || 100) : [];
+          setTimeout(() => {
+            for (const e of evs) ws.dispatchEvent(new MessageEvent('message', { data: JSON.stringify(['EVENT', m[1], e]) }));
+            ws.dispatchEvent(new MessageEvent('message', { data: JSON.stringify(['EOSE', m[1]]) }));
+          }, 0);
+          return;
+        }
+        if (m[0] === 'EVENT') return;
+      } catch {}
+      return send(data);
+    };
+    return ws;
+  };
+  window.WebSocket.prototype = Real.prototype; Object.assign(window.WebSocket, Real);
+}, seeded);
+const errs = [];
+page.on('pageerror', (e) => errs.push(String(e)));
+const click = (t) => page.evaluate((x) => { const e = [...document.querySelectorAll('button')].find((n) => n.textContent.trim().toLowerCase().includes(x)); if (e) { e.click(); return true; } return false; }, t);
+const waitText = async (x, ms = 25000) => { for (let i = 0; i < ms / 250; i++) { if ((await page.evaluate(() => document.body.innerText)).toLowerCase().includes(x)) return true; await sleep(250); } return false; };
+const dom = () => page.evaluate(() => ({
+  rows: document.querySelectorAll('.notes-feed > .row[data-key]').length,
+  top: document.querySelector('.notes-feed > [data-key="win-top"]')?.offsetHeight || 0,
+  bottom: document.querySelector('.notes-feed > [data-key="win-bottom"]')?.offsetHeight || 0,
+  height: document.documentElement.scrollHeight, y: window.scrollY,
+  first: document.querySelector('.notes-feed > .row[data-key]')?.innerText.match(/post number \d+/)?.[0],
+}));
+const anchor = () => page.evaluate(() => {
+  const r = [...document.querySelectorAll('.notes-feed > .row[data-key]')].find((n) => { const b = n.getBoundingClientRect(); return b.bottom > 0 && b.top < innerHeight; });
+  return r ? { id: r.dataset.key, top: Math.round(r.getBoundingClientRect().top) } : null;
+});
+
+try {
+  await page.setViewport({ width: 390, height: 844 });
+  await page.goto('http://localhost:5305/', { waitUntil: 'domcontentloaded' });
+  await page.evaluate(() => localStorage.setItem('btc-wallet-network', 'regtest'));
+  await page.reload({ waitUntil: 'domcontentloaded' }); await sleep(400);
+  await click('create a new wallet'); await sleep(600);
+  await page.waitForSelector('.words .w .t');
+  const mn = (await page.$$eval('.words .w .t', (l) => l.map((e) => e.textContent.trim()))).join(' ');
+  await click('skip verification');
+  await waitText('receive', 20000);
+  const base = cacheKeyFor(mn + '\n');
+  await page.evaluate(([k, pk, ns]) => {
+    localStorage.setItem(k + ':follows', JSON.stringify({ tags: [['p', pk]], c: '', at: Math.floor(Date.now() / 1000) }));
+    localStorage.setItem(k + ':feedNotes', JSON.stringify(ns));
+    localStorage.setItem(k + ':profiles', JSON.stringify({ [pk]: { name: 'Prolific Poster', t: Date.now() } }));
+  }, [base, AUTHOR, seeded]);
+  await page.reload({ waitUntil: 'domcontentloaded' });
+  await waitText('receive', 20000);
+  await page.evaluate(() => { const b = [...document.querySelectorAll('button')].find((e) => /message/i.test(e.getAttribute('aria-label') || '')); if (b) b.click(); }); await sleep(800);
+  await page.evaluate(() => { const e = [...document.querySelectorAll('.item')].find((n) => (n.querySelector('.chat-name') || {}).textContent === 'Feed'); if (e) e.click(); });
+  await sleep(2500);
+  console.log('\n[a long scroll]');
+  check('the feed opens on its first posts', (await dom()).first === 'post number 1', JSON.stringify(await dom()));
+  // page to the bottom, again and again
+  let d = null;
+  for (let i = 0; i < 14; i++) {
+    await page.evaluate(() => window.scrollTo(0, document.documentElement.scrollHeight));
+    await sleep(700);
+    d = await dom();
+  }
+  check('many pages in, the page is long', d.height > 6000, d.height + 'px');
+  check('...but only a window of rows is mounted', d.rows > 0 && d.rows <= 60, d.rows + ' rows');
+  check('...with a spacer standing in for the rows above', d.top > 1000, d.top + 'px');
+
+  console.log('\n[the row under your eyes stays put]');
+  await page.evaluate(() => window.scrollTo(0, Math.round(document.documentElement.scrollHeight * 0.5))); await sleep(600);
+  const a1 = await anchor();
+  // the window moves as you read; a beat later, nothing under the eyes has shifted
+  await page.evaluate(() => window.scrollBy(0, 300)); await sleep(400);
+  await page.evaluate(() => window.scrollBy(0, -300)); await sleep(600);
+  const a2 = await anchor();
+  check('scrolling around and back leaves the same row at the same place', !!a1 && !!a2 && a1.id === a2.id && Math.abs(a1.top - a2.top) <= 2, JSON.stringify({ a1, a2 }));
+  const mid = await dom();
+  check('mid-feed, spacers stand in above and below', mid.top > 500 && mid.bottom > 500 && mid.rows <= 60, JSON.stringify(mid));
+
+  console.log('\n[back to the top]');
+  await page.evaluate(() => window.scrollTo(0, 0)); await sleep(800);
+  const t = await dom();
+  check('the first posts are back in the DOM', t.first === 'post number 1' && t.top === 0, JSON.stringify(t));
+  check('...and the rows below are held by a spacer', t.bottom > 1000 && t.rows <= 60, JSON.stringify(t));
+  check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | '));
+} finally { await browser.close(); server.stop(true); }
+console.log(ok ? '\n✅ the feed stays light however far you scroll' : '\n❌ failed');
+process.exit(ok ? 0 : 1);
diff --git a/tools/moderation-test.js b/tools/moderation-test.js
index 4ac7f69..78fd460 100644
--- a/tools/moderation-test.js
+++ b/tools/moderation-test.js
@@ -57,7 +57,7 @@ await page.evaluateOnNewDocument((fx) => {
           if (kinds.includes(10000) && window.__mutes && (f.authors || []).includes(window.__mutes.pubkey)) answer(ws, m[1], [window.__mutes]);
           else if (kinds.includes(1984) && (f.authors || []).includes(fx.author)) answer(ws, m[1], [fx.report]);
           else if (kinds.includes(1) && f['#e'] && f['#e'].includes(fx.root)) answer(ws, m[1], fx.replies);
-          else if (kinds.includes(1)) subs.push([ws, m[1], f]);
+          else if (kinds.includes(1)) { subs.push([ws, m[1], f]); answer(ws, m[1], []); return; } // no real posts: the feeds hold only what the test injects
         }
         if (m[0] === 'EVENT' && m[1]) {
           window.__published.push(m[1]);
@@ -162,7 +162,9 @@ try {
   const stuffed = post(TAGGER, 'airdrop ' + Array.from({ length: 14 }, (_, i) => '#tag' + i).join(' '), 5, [['t', 'bitcoin'], ...Array.from({ length: 14 }, (_, i) => ['t', 'tag' + i])]);
   await page.evaluate((e) => window.__inject(e), stuffed);
   await sleep(3500);
-  check('a stranger\'s ordinary post lands', n > 0 && await waitText('a fine post from a stranger', 6000), n + ' sub(s)');
+  const landed = n > 0 && await waitText('a fine post from a stranger', 6000);
+  if (!landed && process.env.DEBUG) console.log('DEBUG feed:', await page.evaluate(() => ({ rows: document.querySelectorAll('.notes-feed > .row').length, booting: !!document.querySelector('.notes-feed[data-booting]'), spacers: document.querySelectorAll('.feed-spacer').length, text: (document.querySelector('.chat-page') || document.body).innerText.slice(0, 400).replace(/\n+/g, ' | ') })));
+  check('a stranger\'s ordinary post lands', landed, n + ' sub(s)');
   check('six copies of the same pitch do not: the spammer is hidden', !(await has('buy the dip now')));
   check('...nor does a post stuffed with hashtags', !(await has('airdrop')));