perf(preprod): Virtualize snapshot sidebar for 40k image builds#115836
Merged
Conversation
The snapshot sidebar rendered all items as real DOM nodes, causing severe lag when viewing builds with 40,000+ images. Replace with @tanstack/react-virtual to only render ~50 nodes at a time. Also adds loading="lazy" to list view images and updates tests for JSDOM compatibility with the virtualizer. Co-Authored-By: Claude <noreply@anthropic.com>
mtopo27
approved these changes
May 19, 2026
Contributor
📊 Type Coverage Diff
🔍 2 new type safety issues introducedNon-null assertions (
This is informational only and does not block the PR. |
The virtualizer needs to measure the scroll container before rendering items. In the snapshot testing environment, the measurement cycle hasn't completed by screenshot time, resulting in empty sidebars. initialRect provides dimensions for the first paint. Co-Authored-By: Claude <noreply@anthropic.com>
Initialize prevActiveItemKeyRef to undefined so the scroll-to-active effect fires on initial mount when activeItemKey is already set (e.g., deep linking to a specific snapshot). Co-Authored-By: Claude <noreply@anthropic.com>
…tyling The virtualized section header button had larger padding (8px 16px) and gap (6px) than the original Disclosure component. Align height, padding, gap, and font-size with the form.xs theme values to eliminate visual regression. Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 51c6d93. Configure here.
Replace the custom SectionHeaderButton with the original SectionDisclosure + Disclosure.Title components, and restore the original Stack scroll container. This ensures zero visual regression while keeping the virtualizer for performance. Co-Authored-By: Claude <noreply@anthropic.com>
mtopo27
approved these changes
May 19, 2026
NicoHinderling
added a commit
that referenced
this pull request
May 20, 2026
…15922) Remove `loading="lazy"` and `decoding="async"` from the `LazyImage` component in the snapshot diff view. `LazyImage` already manages its own visibility via `loaded` state and `opacity: 0` positioning — it renders the `<img>` immediately but hides it until `onLoad` fires. Stacking the browser's native `loading="lazy"` on top caused the browser to defer fetching images it considered off-screen (inside scrollable containers with `opacity: 0`), so the `onLoad` event never fired and base images stayed blank. Introduced in #115836. Co-authored-by: Claude <noreply@anthropic.com>
JonasBa
pushed a commit
that referenced
this pull request
May 21, 2026
…15922) Remove `loading="lazy"` and `decoding="async"` from the `LazyImage` component in the snapshot diff view. `LazyImage` already manages its own visibility via `loaded` state and `opacity: 0` positioning — it renders the `<img>` immediately but hides it until `onLoad` fires. Stacking the browser's native `loading="lazy"` on top caused the browser to defer fetching images it considered off-screen (inside scrollable containers with `opacity: 0`), so the `onLoad` event never fired and base images stayed blank. Introduced in #115836. Co-authored-by: Claude <noreply@anthropic.com>
3 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

The snapshot sidebar rendered every item as a real DOM node. When viewing
a build with 40,000 images, this meant 40k+ DOM elements in the sidebar
alone, causing severe page lag — scrolling, typing in search, and
navigating were all sluggish.
This replaces the flat rendering with
@tanstack/react-virtual(thesame library already used by the main list view). Only ~50 sidebar nodes
exist in the DOM at any time (visible items + 25 overscan). The section
header collapse/expand, search filtering, active-item highlighting, and
scroll-to-active behaviors are all preserved.
Additional changes:
loading="lazy"anddecoding="async"to theLazyImagecomponent's
<img>as a belt-and-suspenders measure alongside theexisting virtualizer
<Disclosure>section headers with a standalone button(Disclosure wraps children, which is incompatible with virtualization),
preserving
aria-expandedfor accessibilitySidebarItemandSectionHeaderRowsub-componentsactiveItemKeychanges,not on collapse/expand which also mutates
virtualRows