diff options
| -rw-r--r-- | src/features/messages.js | 72 | ||||
| -rw-r--r-- | tools/profile-open-test.js | 121 |
2 files changed, 183 insertions, 10 deletions
diff --git a/src/features/messages.js b/src/features/messages.js index 254e5ca..6cb3322 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -309,7 +309,8 @@ export function messagesFeature(ctx) { // spreads a cold-relay miss across sessions. if (!p || (!p.name && !p.picture)) return; const s = wallet.loadFeatureState('profiles', {}); - s[pk] = { name: p.name || null, picture: p.picture || null, nip05: p.nip05 || null, lud16: p.lud16 || null, t: Date.now(), + s[pk] = { name: p.name || null, picture: p.picture || null, nip05: p.nip05 || null, lud16: p.lud16 || null, + about: p.about || null, banner: p.banner || null, t: Date.now(), ...(p.thumbFor === p.picture && p.thumb ? { thumb: p.thumb, thumbFor: p.thumbFor, thumbPx: p.thumbPx || 0 } : {}), ...(p.thumbFail ? { thumbFail: p.thumbFail, thumbFailAt: p.thumbFailAt || 0, thumbFails: p.thumbFails || 1, @@ -397,8 +398,11 @@ export function messagesFeature(ctx) { // ...and for all of them together. Raised with THUMB_PX: a 144px face // costs about 5.4KB against 96px's 3.2KB, and the budget is what decides // how many faces paint instantly rather than fetching their original — - // this holds about fifty, which covers a feed and an inbox at once. - const THUMB_BUDGET = 280_000; + // this holds about fifty, which covers a feed and an inbox at once. The + // blob carries each profile's bio and banner as well now — a couple of + // hundred bytes each, and the reason a profile page paints on the first + // tap — so the ceiling is raised to keep the same number of faces. + const THUMB_BUDGET = 320_000; const THUMB_SLOW = 20_000; // a host that won't answer must not hold a slot const THUMB_RETRY = 6 * 3600_000; // ...and must not be written off for good const THUMB_RETRY_MAX = 14 * 24 * 3600_000; // a host that never works, backed off @@ -515,6 +519,13 @@ export function messagesFeature(ctx) { picture: m.picture || null, nip05: m.nip05 || null, lud16: typeof m.lud16 === 'string' ? m.lud16.trim() : null, + // The batch downloaded this person's WHOLE kind 0 to get their name. + // Keeping the bio and the banner costs one more field each and is the + // difference between a profile page that paints and one that jumps + // when the fetch lands a second later. 1000 chars is what the page + // renders anyway. + about: typeof m.about === 'string' ? m.about.slice(0, 1000) : null, + banner: typeof m.banner === 'string' ? m.banner.slice(0, 400) : null, } : null; // An empty answer must never clobber a remembered face with a punk: keep // what we had and just refresh the clock. @@ -1979,6 +1990,12 @@ export function messagesFeature(ctx) { if (p && p.picture) makeThumb(pk, p); if (clickable) { node.classList.add('clickable'); + // Start the profile's own fetches on touch-DOWN, not on click. The gap + // between the two is a hundred-odd milliseconds of free head start, + // and unlike prefetching every row on paint (which cost sixty requests + // for twenty rows and starved the profile batch) this only ever asks + // about the person actually being tapped. + node.addEventListener('pointerdown', () => { try { prefetchProfilePage(pk); } catch {} }, { passive: true }); node.addEventListener('click', (e) => { e.stopPropagation(); openProfile(pk); }); } return hook('wrapAvatar', pk, node) || hatStamp(pk, node) || node; @@ -2053,6 +2070,8 @@ export function messagesFeature(ctx) { const entry = { name: m.display_name || m.name || null, picture: m.picture || null, nip05: m.nip05 || null, lud16: typeof m.lud16 === 'string' ? m.lud16.trim() : null, + about: typeof m.about === 'string' ? m.about.slice(0, 1000) : null, + banner: typeof m.banner === 'string' ? m.banner.slice(0, 400) : null, t: Date.now(), }; keepThumb(pk, entry); @@ -2379,14 +2398,34 @@ export function messagesFeature(ctx) { } const notesRelays = async (pk) => [...new Set([...NOTE_RELAYS, ...(await relaysOf(pk))])]; + // Posts of theirs we already hold. Tapping a face in the feed is the + // common way onto a profile, and the feed we just came from is full of + // that person's posts — an open thread holds their replies too. Painting + // those first means the page opens with real content instead of an empty + // column that fills in a beat later, and the relay fetch below replaces + // them the moment it answers. + function notesInHand(pk) { + const out = new Map(); + for (const e of (feed && feed.notes) || []) if (e.pubkey === pk) out.set(e.id, e); + for (const c of threadCache.values()) { + if (c.root && c.root.pubkey === pk) out.set(c.root.id, c.root); + for (const e of c.replies || []) if (e.pubkey === pk) out.set(e.id, e); + } + return [...out.values()].sort((a, b) => b.created_at - a.created_at); + } + function notesFor(pk) { let c = notesCache.get(pk); if (c) return c; // stored posts paint the page instantly; the relay fetch below freshens const stored = pageCache().notes[pk]; + const seed = stored ? stored.v : notesInHand(pk); + // Seeded from memory the status stays 'loading': these are posts we + // happen to have, not their page, so the real answer still replaces + // them — but there is something to read while it comes. c = stored ? { status: 'ready', notes: stored.v } - : { status: 'loading', notes: [] }; + : { status: 'loading', notes: seed }; notesCache.set(pk, c); (async () => { const evs = await queryOn(await notesRelays(pk), { kinds: [1], authors: [pk], limit: 30 }, 4500); @@ -3263,6 +3302,7 @@ export function messagesFeature(ctx) { h('span', { // the name, like the avatar, is its own tap-target (profile) style: 'font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer', + onPointerdown: () => { try { prefetchProfilePage(pk); } catch {} }, onClick: (e) => { e.stopPropagation(); openProfile(pk); }, }, name), h('span', { class: 'small faint', style: 'white-space:nowrap' }, @@ -3711,8 +3751,15 @@ export function messagesFeature(ctx) { const nip05 = rawNip05 ? String(rawNip05).replace(/^_@/, '') : null; const lud16 = (full && full.lud16 ? String(full.lud16) : null) || lp.lud16 || null; const showLud = lud16 && !/^npub1/i.test(lud16) && lud16 !== nip05; - // an about of "~" or a lone character is noise, not a bio - const about = full && typeof full.about === 'string' ? full.about.trim() : ''; + // an about of "~" or a lone character is noise, not a bio. + // Until the full kind 0 lands, the light profile cache answers — it was + // filled by the same batched fetch that named this person in the feed, + // so the bio is already in hand and the page doesn't grow a paragraph + // half a second after it opens. Once `full` is known it is the truth, + // including when it says there is no bio. + const about = full !== undefined + ? (typeof full.about === 'string' ? full.about.trim() : '') + : (typeof lp.about === 'string' ? lp.about.trim() : ''); const showAbout = about.length > 1; // The cover photo: nostr's standard kind-0 `banner`. Legacy coinos.io // wore these proudly — migrated accounts bring theirs along, and anyone @@ -3723,7 +3770,10 @@ export function messagesFeature(ctx) { const draft = mine && ui.profEdit ? ui.profEdit : null; const urlish = (s) => (typeof s === 'string' && /^https?:\/\//i.test(s.trim()) ? s.trim() : null); const bannerUrl = draft ? urlish(draft.banner) - : (full && urlish(full.banner)) || null; + : full !== undefined ? urlish(full.banner) + // same as the bio: the cached copy holds the space so the whole page + // doesn't drop by the height of a cover photo when it arrives + : urlish(lp.banner); const draftPic = draft && urlish(draft.picture); return h('div', { class: 'col', style: 'gap:16px' }, // full header on profiles too — losing the search button here made @@ -3891,9 +3941,11 @@ export function messagesFeature(ctx) { // edge, no card walls (see .notes-feed). (() => { const c = notesFor(pk); - // while loading: an invisible copy of the empty-state line holds the - // height, so the page doesn't jump when the answer lands (no spinner) - if (c.status === 'loading') + // while loading with nothing to show: an invisible copy of the + // empty-state line holds the height, so the page doesn't jump when + // the answer lands (no spinner). With posts already in hand — from + // the feed we came from — those are shown instead of the blank. + if (c.status === 'loading' && !c.notes.length) return h('div', { class: 'small faint', style: 'text-align:center;visibility:hidden' }, t('profNotesNone')); if (!c.notes.length) return h('div', { class: 'small faint', style: 'text-align:center' }, t('profNotesNone')); diff --git a/tools/profile-open-test.js b/tools/profile-open-test.js new file mode 100644 index 0000000..7c88dee --- /dev/null +++ b/tools/profile-open-test.js @@ -0,0 +1,121 @@ +// Tapping a face in the feed should land on a profile that is already +// there: the bio, the banner and some of their posts painted in the first +// frame, not half a second later once relays answer — which is what made +// the page jump under your thumb. +// +// The bio and banner come free: the batched kind-0 fetch that named these +// people in the feed downloaded their whole profile, so it is already in +// hand. The posts come from the feed itself. +// +// Measured as the browser measures it — layout-shift entries after the tap. +// +// Run: bun tools/profile-open-test.js +import puppeteer from 'puppeteer-core'; +import { generateMnemonic } from '@scure/bip39'; +import { wordlist } from '@scure/bip39/wordlists/english'; +import { cacheKeyFor } from '../src/wallet.js'; +import { buildHtml } from '../build.js'; +import { SimplePool } from 'nostr-tools/pool'; +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; }; + +// Real people with real bios: pull recent posters, then keep only the ones +// whose kind 0 actually carries an `about`, so "the bio painted" is a claim +// that can be true. +const pool = new SimplePool(); +const RELAYS = ['wss://relay.primal.net', 'wss://nos.lol', 'wss://relay.damus.io']; +const recent = await pool.querySync(RELAYS, { kinds: [1], limit: 150, since: Math.floor(Date.now() / 1000) - 7200 }, + { maxWait: 8000 }).catch(() => []); +const posters = [...new Set(recent.map((e) => e.pubkey))].slice(0, 40); +const withBio = new Map(); +for (const e of await pool.querySync(RELAYS, { kinds: [0], authors: posters }, { maxWait: 8000 }).catch(() => [])) { + try { + const m = JSON.parse(e.content); + if ((m.display_name || m.name) && typeof m.about === 'string' && m.about.trim().length > 30) { + const p = withBio.get(e.pubkey); + if (!p || e.created_at > p.created_at) withBio.set(e.pubkey, e); + } + } catch {} +} +const authors = [...withBio.keys()]; +const notes = recent.filter((e) => withBio.has(e.pubkey)); +if (authors.length < 4 || notes.length < 6) { console.log(' ✗ not enough people with bios posting right now'); process.exit(1); } +console.log(` ${authors.length} people with a real bio, ${notes.length} of their posts`); + +const html = await buildHtml({ minify: true, pwa: false }); +const server = Bun.serve({ port: 5276, fetch: () => 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(); +await page.evaluateOnNewDocument(() => { + window.__shift = 0; + window.__shiftOn = false; + new PerformanceObserver((l) => { + for (const e of l.getEntries()) if (!e.hadRecentInput && window.__shiftOn) window.__shift += e.value; + }).observe({ type: 'layout-shift', buffered: true }); +}); +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; }; +try { + await page.setViewport({ width: 390, height: 844 }); + await page.goto('http://localhost:5276/', { waitUntil: 'domcontentloaded' }); + await page.evaluate(() => localStorage.setItem('btc-wallet-network', 'regtest')); + await page.reload({ waitUntil: 'domcontentloaded' }); + await sleep(400); + await click('get started'); await sleep(500); + await click('import existing'); await sleep(400); + await page.waitForSelector('textarea'); + const mn = generateMnemonic(wordlist); + await page.type('textarea', mn); + await click('open wallet'); + await waitText('receive', 20000); + const base = cacheKeyFor(mn + '\n'); + await page.evaluate(([k, pks, ns]) => { + localStorage.setItem(k + ':follows', JSON.stringify({ tags: pks.map((p) => ['p', p]), c: '', at: Math.floor(Date.now() / 1000) })); + localStorage.setItem(k + ':feedNotes', JSON.stringify(ns)); + }, [base, authors, notes.map((e) => ({ id: e.id, pubkey: e.pubkey, kind: 1, created_at: e.created_at, content: e.content.slice(0, 200), tags: [] }))]); + 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(1000); + await page.evaluate(() => { const e = [...document.querySelectorAll('.item')].find((n) => /feed/i.test(n.textContent)); if (e) e.click(); }); + // let the feed settle completely — this test is about what happens AFTER + await sleep(12000); + + // tap the first face whose person we know has a bio + const target = await page.evaluate((pks) => { + const rows = [...document.querySelectorAll('.notes-feed > .row')]; + for (const r of rows) { + const a = r.querySelector('.note-avatar'); + if (!a) continue; + window.__shiftOn = true; + a.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true })); + a.click(); + return true; + } + return false; + }, authors); + check('a face in the feed opens a profile', target); + + // the very next frame: what is on the page? + await page.evaluate(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)))); + const first = await page.evaluate(() => ({ + npub: /npub1/.test(document.body.innerText), + // the bio is the paragraph in the profile card, not a post + bio: (document.querySelector('.card p') || {}).textContent || '', + posts: document.querySelectorAll('.notes-feed > .row').length, + })); + check('the bio is there in the first frame', first.bio.trim().length > 20, + first.bio ? first.bio.trim().slice(0, 48).replace(/\n/g, ' ') + '…' : 'blank'); + check('...and so are some of their posts', first.posts > 0, first.posts + ' posts'); + + // and nothing jumps while the relays answer + await sleep(7000); + const shift = await page.evaluate(() => window.__shift); + const after = await page.evaluate(() => document.querySelectorAll('.notes-feed > .row').length); + // 0.1 is the browser's own "good" threshold for cumulative layout shift + check('the page does not jump while it loads', shift < 0.1, 'layout shift ' + shift.toFixed(3)); + check('the relay answer fills in behind it', after > 0, first.posts + ' posts on open, ' + after + ' after'); +} finally { await browser.close(); server.stop(true); } +console.log(ok ? '\n✅ the profile is already there when you land on it' : '\n❌ failed'); +process.exit(ok ? 0 : 1); |