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

1 files changed, 2 insertions, 0 deletions

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. */