Skip to content

perf(snapshots): Buffer image swap to eliminate flash during single-view navigation#114271

Open
NicoHinderling wants to merge 2 commits into04-28-ref_snapshots_final_ui_tweaksfrom
04-28-perf_snapshots_buffer_image_swap_to_eliminate_flash_during_single-view_navigation
Open

perf(snapshots): Buffer image swap to eliminate flash during single-view navigation#114271
NicoHinderling wants to merge 2 commits into04-28-ref_snapshots_final_ui_tweaksfrom
04-28-perf_snapshots_buffer_image_swap_to_eliminate_flash_during_single-view_navigation

Conversation

@NicoHinderling
Copy link
Copy Markdown
Contributor

@NicoHinderling NicoHinderling commented Apr 29, 2026

Switching between images in single-view mode had a noticeable delay — the old image would disappear immediately, leaving a blank flash while the browser fetched and decoded the new one.

Two fixes:

loading="eager" + decoding="async" — The core Image component defaults to loading="lazy", which is counterproductive for single-view images since they're always in the viewport. Switching to eager removes the lazy-load heuristic delay. decoding="async" keeps the decode non-blocking.

useBufferedImageUrl hook — Instead of swapping the <img> src immediately (which clears the old image), this hook pre-decodes the new image via new Image().decode() in the background and only swaps the URL once it's paint-ready. The old image stays on screen the entire time, so there's no blank gap.

List-view images are unaffected — they correctly use loading="lazy" via snapshotDiffBodies.tsx.

Comment thread static/app/views/preprod/snapshots/main/imageDisplay/useBufferedImageUrl.ts Outdated
Copy link
Copy Markdown
Contributor

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit f2a32ed. Configure here.

Comment thread static/app/views/preprod/snapshots/main/imageDisplay/useBufferedImageUrl.ts Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant