Uh oh!
There was an error while loading. Please reload this page.
perf(images): lazy-load below-the-fold remote images (#111, part 1) - #312
Conversation
Add loading="lazy" to the remote/user-content <img> elements that render below the fold so they don't compete with initial load: - Social chat attachments; MarkdownChat markdown images - Settings cosmetic overlay + banner previews - Admin cosmetic upload preview + catalog-row thumbnails (the fixed 28x28 catalog thumb also gets width/height attrs to reserve its space) Responsive images (maxWidth / container-filled) get lazy only — forced fixed dimensions would distort them; their space is already reserved by the parent. Scope: this is the image-loading slice of #111. The runtime-animation half (landing-canvas reduced-motion guard, per-frame shadowBlur / querySelectorAll, atmospheric-orb throttle, KnowledgeGraph2D per-tick re-render) is separate and not in this PR. Full next/image adoption is deferred — non-trivial on the OpenNext/Cloudflare target (no built-in optimizer; needs a custom loader). Verified: npm run typecheck clean; eslint 0 errors on the changed files (the pre-existing no-img-element warnings are unchanged). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Deploying with |
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs | frontend-staging | 993eb2c | Commit Preview URL Branch Preview URL | Jul 03 2026, 02:57 AM |
Warning Review limit reached
Next review available in:45 seconds Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
AndresL230
left a comment
There was a problem hiding this comment.
Reviewed — approving. All 6 lazy sites verified: the Settings/Admin previews sit in explicitly sized containers, the catalog thumb's new width/height attrs match its styles, coverage sweep found no missed remote images, and the next/image deferral is accurate (no loader configured for OpenNext/Cloudflare).
One known trade-off, accepted rather than blocking: room-chat attachments have no reserved height, so scrolling up through history now pops images in as they load — invisible-ish on Chrome/Firefox (scroll anchoring), visible jumps on Safari/iOS (no anchoring). Can't be fixed here since room_messages stores no image dimensions; filed #315 to capture width/height at upload and reserve an aspect-ratio box.
🤖 Generated with Claude Code
Uh oh!
There was an error while loading. Please reload this page.
* feat(social): reserve space for chat image attachments (#315) Room-chat attachments rendered into a zero-height box until the image loaded. Combined with the `loading="lazy"` that #312 added, scrolling UP through history expanded each image as it neared the viewport and shifted the transcript mid-scroll. Chrome and Firefox mostly absorb that with scroll anchoring; Safari has none, so the viewport visibly jumps on every load. It also invalidated the loadEarlier scrollTop compensation, which measures scrollHeight before the prepended images have loaded. This could not be fixed in the frontend alone: room_messages stored only image_url, so there was nothing to reserve a box with. 0040 image_width / image_height on room_messages, nullable models the same two fields on SendMessageBody, optional social.py both columns in the select list and the insert api.ts sendRoomMessage takes an optional imageSize Social.tsx measures the file before upload; renders into an aspect-ratio box The measurement happens on the picked File via an object URL, before upload, so the dimensions travel with the message that creates it — history then renders reserved from the first paint rather than after a round trip. Degrades quietly by design, at every layer. The columns are nullable and unbackfilled, so every message written before this keeps NULL; readImageSize resolves undefined on a non-image or a decode failure rather than blocking the send; and the renderer only applies width/height/aspect-ratio when both values are present. Anything without dimensions renders exactly as it does today. Backfilling would mean fetching every historical image to measure it, which is not worth it for a layout hint. part of #315 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(social): bound the client-supplied image dimensions (#315) Review finding, and a real one: image_width/image_height arrive from the client and the transcript renders them directly as an aspect-ratio, so an absurd pair is a layout weapon against every member of the room rather than a bad row for its author. Unbounded, any room member could POST width=1, height=2000000000 — comfortably inside Postgres INTEGER range, so it inserts cleanly — and every viewer of that room gets a ~2-billion-pixel-tall bubble, with no edit path to recover short of a DB fix. That is a genuine escalation in blast radius: before this PR the worst a bogus attachment could do was render a broken-image icon. Bounded at three layers: models Field(gt=0, le=20000) on both, matching the Field(gt=0) pattern this file already uses for client-supplied numerics. 20000 is comfortably past any real image (8K is 7680). migration a CHECK constraint, matching the convention 0021 established. NOT VALID so it governs new writes without scanning existing rows — every pre-existing row is NULL in both columns, and NULL passes a CHECK anyway. Wrapped so a re-run is a no-op. render objectFit: contain and maxHeight, so dimensions that are merely WRONG (rather than absurd) letterbox instead of stretching, and a tall ratio cannot escape the box — maxWidth alone cannot cap height once the ratio drives it. Editing 0040 rather than adding 0041 because it has not been applied anywhere: it is unmerged, and the only database that has seen it is the local throwaway the from-empty replay rebuilds from scratch each run. Adds tests for the bounds — nothing covered these fields before. part of #315 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Part of #111 (image-loading slice). Adds
loading="lazy"to the 6 remote/user-content<img>elements that render below the fold: Social chat attachments, MarkdownChat markdown images, Settings cosmetic overlay + banner, Admin cosmetic preview + catalog thumbnails. The fixed 28×28 catalog thumb also getswidth/heightattrs to reserve space.Responsive images get lazy only — forced fixed dims would distort them; their space is already reserved by the parent.
Verified locally:
npm run typecheckclean;eslint0 errors on the changed files (pre-existingno-img-elementwarnings unchanged).Deliberately not here (the rest of #111):
shadowBlur/querySelectorAll, atmospheric-orb throttle, KnowledgeGraph2D per-tick re-render. Real work, separate PR.next/image— non-trivial on OpenNext/Cloudflare (no built-in optimizer; needs a custom loader).So #111 stays open; this is the low-risk lazy-loading slice.
🤖 Generated with Claude Code