Skip to content

Test fixes to infinite scroll on media upload modal - #79661

Closed
tellthemachines wants to merge 3 commits into
trunkfrom
test/media-upload-modal
Closed

tellthemachines wants to merge 3 commits into
trunkfrom
test/media-upload-modal

Conversation

@tellthemachines

Copy link
Copy Markdown
Contributor

What?

Closes

FOR TESTING PURPOSES ONLY - DO NOT MERGE!!!

  1. Go to Gutenberg > Experiments and enable "Media upload modal" under "Media".
  2. Add an Image or Gallery to a post, and open the media library through it.
  3. Ensure your media library has at least 300 images in it.
  4. Scroll through the modal and check that it feels smooth and not janky.

(the reason we don't want to enable infinite scroll on the media upload modal is because there's no off switch for it yet, and infinite scroll isn't hugely accessible so we should always be able to switch it off easily)

arthur791004 and others added 3 commits June 25, 2026 21:52
…ic repro

The infinite-scroll scroll-anchor restoration captures an anchor in the
throttled scroll handler the instant the window advances, but only restores
it on a later render gated on `isLoading`. When pages load asynchronously the
user keeps scrolling in that gap, and the restoration can't distinguish that
user-driven movement from a content-driven shift, so it snaps the list back to
the capture-time position — yanking the viewport upward.

Fix: store `scrollTop` at capture and add the intervening scroll delta back so
only the content-driven shift is compensated. When the user does not scroll
during the load the added term is 0 and behaviour is unchanged.

Add an `AsyncInfiniteScroll` story that reveals pages asynchronously (with a
live scrollTop HUD) and a `play` function that reproduces the jump
deterministically — it advances the window, keeps scrolling while the page is
in flight, and asserts the list does not snap back. It fails against the buggy
trunk hook and passes with the fix, so the Storybook smoke-test CI run guards
the regression.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ro story

Builds on the anchor-jump fix with the two remaining async infinite-scroll
problems and a realistic reproduction:

- Stall: loading more is driven only by scroll events near the bottom, and rows
  unload without preserving height, so once pinned at the bottom no scroll event
  fires and the next page is never requested. Keep the loading spinner (List
  layout) mounted until everything is loaded, reserving its height so there is
  always room to scroll past the last row and the loader keeps firing.

- Bounce: the spinner was mounted only while loading, so it changed the scroll
  height on every load and shifted the position. Keeping it mounted (hidden, and
  aria-hidden, while idle) keeps the height constant.

- Rewrite the async infinite-scroll story to a realistic network-backed consumer
  (no prefetch buffer; isLoading tied to the requested window; true server
  total) with a live scroll HUD, and drop the buffer-based interaction test.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown

Size Change: +81 B (0%)

Total Size: 7.5 MB

📦 View Changed
Filename Size Change
build/scripts/media-utils/index.min.js 114 kB +81 B (+0.07%)

compressed-size-action

@arthur791004
arthur791004 force-pushed the fix/dataviews-infinite-scroll-jump-repro branch 2 times, most recently from 989d486 to 9bb5f50 Compare July 6, 2026 02:15
Base automatically changed from fix/dataviews-infinite-scroll-jump-repro to trunk July 6, 2026 03:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Media Utils /packages/media-utils

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants