diff options
| author | Adam Soltys <[email protected]> | 2026-08-04 01:50:24 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-08-04 01:50:24 -0700 |
| commit | c19fd63f1687c8fdfd38a8446e7cf936342ba4ef (patch) | |
| tree | 0238a55a48d2a6f387a4547df9320428b3e8c7ad /src/recipient-search.js | |
| parent | 7b7f2b5e8a6f2abc05fef94e0a8f6cb9dd0b9928 (diff) | |
| download | coinosv3-c19fd63f1687c8fdfd38a8446e7cf936342ba4ef.tar.gz coinosv3-c19fd63f1687c8fdfd38a8446e7cf936342ba4ef.zip | |
Avatars stop flashing everywhere: backgrounds, not <img>
A recreated <img> decodes async — one blank frame per render, and boot
renders in bursts. A CSS background paints synchronously from cache, so
the profile page, chat rows, and send candidates all hold steady now.
Co-Authored-By: Claude Fable 5 <[email protected]>
Diffstat (limited to 'src/recipient-search.js')
| -rw-r--r-- | src/recipient-search.js | 4 |
1 files changed, 3 insertions, 1 deletions
diff --git a/src/recipient-search.js b/src/recipient-search.js index b8a17ea..2cf52b6 100644 --- a/src/recipient-search.js +++ b/src/recipient-search.js @@ -161,7 +161,9 @@ export function resultRows(h, rows, onPick) { return rows.map((r) => h('div', { class: 'item chat-thread-row', onClick: () => onPick(r) }, r.picture - ? h('img', { class: 'chat-avatar', src: r.picture, alt: '' }) + // background, not <img>: paints synchronously from cache, so rows + // re-rendered per keystroke don't flash their avatars + ? h('div', { class: 'chat-avatar ava-img', style: `background-image:url(${JSON.stringify(r.picture)})` }) : fallbackAvatar(h, r.pk, r.name, 'chat-avatar'), h('div', { class: 'col grow', style: 'min-width:0;gap:1px' }, h('div', { class: 'chat-name' }, r.name || (npubOf(r.pk) || '').slice(0, 12)), |