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]>

1 files changed, 3 insertions, 1 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index f9a2176..293ebd9 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -962,7 +962,9 @@ export function messagesFeature(ctx) {
     const node = p === null
       ? h('div', { class: cls + ' fallback loading' })
       : p.picture
-        ? h('img', { class: cls, src: p.picture, alt: '' })
+        // A background paints synchronously from cache; a fresh <img> decodes
+        // async, so recreating one per render made avatars visibly flash.
+        ? h('div', { class: cls + ' ava-img', style: `background-image:url(${JSON.stringify(p.picture)})` })
         : fallbackAvatar(h, pk, p.name, cls);
     if (clickable) {
       node.classList.add('clickable');