Feed: a slow picture keeps loading in place instead of turning into a link. A feed row waits up to 8 s for its pictures, then freezes as it is; a picture still downloading at that moment (Juraj's 3.5 MB PNG from blossom.primal.net, on a phone) was frozen as its bare URL, and only showed when the post was opened. Now a picture that was merely slow is drawn in a fixed 4:3 box (fitted inside, so nothing moves when it lands) and keeps loading; only a picture that refused to load (an error, not a timeout — mediaFailed) is still a link. tools/slow-image-test.js (a picture served after 11 s; on the old code it was a link).

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Vps2H27rhbG9ZqseGfMrc3

2 files changed, 16 insertions, 3 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index 4512818..358bd2e 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -6073,6 +6073,7 @@ export function messagesFeature(ctx) {
   // a late response is useful on the next visit, not a mid-read replacement.
   const READY_MS = 8000;
   const mediaReady = new Map(); // URL -> decoded dimensions
+  const mediaFailed = new Set(); // URLs whose picture refused to load (not merely slow)
   const mediaWarming = new Map();
   // A post's photo is often the camera's original — 3024px wide, twelve
   // megapixels — painted into a column a sixth of that. Chrome decodes it
@@ -6160,11 +6161,11 @@ export function messagesFeature(ctx) {
       const done = (ok) => {
         clearTimeout(timer);
         img.onload = img.onerror = null;
-        if (ok) mediaReady.set(url, { width: img.naturalWidth, height: img.naturalHeight });
+        if (ok) { mediaReady.set(url, { width: img.naturalWidth, height: img.naturalHeight }); mediaFailed.delete(url); }
         resolve();
       };
       img.onload = () => { (img.decode ? img.decode() : Promise.resolve()).then(() => done(true), () => done(false)); };
-      img.onerror = () => done(false);
+      img.onerror = () => { mediaFailed.add(url); done(false); };
       img.src = url;
     }).finally(() => { if (mediaWarming.get(url) === task) mediaWarming.delete(url); });
     task.plain = true;
@@ -7726,7 +7727,17 @@ export function messagesFeature(ctx) {
     if (AUDIO_RE.test(url)) return audioNode(url, label);
     if (isImage || /\.(png|jpe?g|gif|webp|avif)(\?[^\s]*)?$/i.test(url)) {
       const size = feedPaint ? feedMedia(url) : null;
-      if (feedPaint && !size) return h('a', { href: url, target: '_blank', rel: 'noopener noreferrer' }, label || url);
+      if (feedPaint && !size) {
+        // a picture that refused to load is a link; one that was merely
+        // slow (a 3.5 MB PNG on a phone outran the row's deadline) keeps
+        // loading inside a box of fixed shape, so nothing moves when it lands
+        if (mediaFailed.has(url)) return h('a', { href: url, target: '_blank', rel: 'noopener noreferrer' }, label || url);
+        return h('img', {
+          src: url, class: 'note-img note-img-late clickable', loading: 'lazy', decoding: 'async', alt: label || '',
+          onClick: (e) => { if (!onPicture(e)) return; e.stopPropagation(); ctx.openImage && ctx.openImage(url); },
+          onError: (e) => { e.target.style.display = 'none'; },
+        });
+      }
       // tap it to see it full size (the feed shows it uncropped, but
       // height-capped: see .note-img)
       const known = size || mediaReady.get(url);
diff --git a/src/style.css b/src/style.css
index 8d41124..dad0520 100644
--- a/src/style.css
+++ b/src/style.css
@@ -691,6 +691,8 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; }
    its width/height, keeps the frame to the picture) */
 .note-img { display: block; max-width: min(100%, calc(min(560px, 70vh) * var(--ar, 100))); max-height: min(560px, 70vh); border-radius: 10px; margin-top: 6px; object-fit: contain; }
 .note-img.clickable { cursor: zoom-in; }
+/* a picture still loading when its row was frozen: a fixed box, fitted inside */
+.note-img.note-img-late { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; height: auto; background: rgba(127,127,127,.08); }
 /* The row under a post: reply, boost, quote, react, zap — spread across the
    post's full width so each is a comfortable target, quiet until one carries
    a count or you've used it. */