Skip to content

refactor: trigger range fetching before items reach viewport#9480

Draft
vursen wants to merge 5 commits into
mainfrom
fix/grid-viewport-range-page-alignment
Draft

refactor: trigger range fetching before items reach viewport#9480
vursen wants to merge 5 commits into
mainfrom
fix/grid-viewport-range-page-alignment

Conversation

@vursen

@vursen vursen commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

The grid web component fires a page request to the data provider only when a row from that page gets rendered in the DOM. Combined with the limited size of the viewport buffer, this often leaves the grid briefly showing lots of blank rows even when scrolling at a relatively slow speed, since pages can't load fast enough to keep up. Then, when the response arrives, many rendered rows get updated at once, triggering a heavy synchronous DOM update that blocks the event loop and has a negative impact on FPS. This effect got even more noticeable after vaadin/web-components#11196, which reduced the number of rendered rows outside the viewport. So while render time metrics improved after that fix, scroll frame time metrics regressed.

...

Before:

Before.mov

After:

After.mov

Depends on

@vursen vursen changed the title refactor: trigger range loading before items reach viewport refactor: trigger range fetching before items reach viewport Jun 10, 2026
@vursen vursen changed the title refactor: trigger range fetching before items reach viewport refactor: trigger range fetching in advance while scrolling Jun 10, 2026
@vursen vursen changed the title refactor: trigger range fetching in advance while scrolling refactor: trigger range fetching before items reach viewport Jun 10, 2026
vursen and others added 5 commits June 11, 2026 10:10
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
`_updateScrollerItem` ran the fetch-range load whenever a column
tree existed, triggering loads during non-scroll updates. Gate it on
the scrolling state (`overscrollBehavior === 'auto'`) so the load only
happens while the user is actually scrolling.
The web component renamed `_updateScrollerItem` to
`__updateVirtualizerElement` and no longer toggles the
`overscrollBehavior` style while scrolling. Hook the new method and
use the scroller's `scrolling` attribute instead.
The fetch range is now clamped to the last valid index, so at the end of the grid the connector requests only the last existing page (count 50) instead of also a page past the end (count 100).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Clamping the range after expanding it to page boundaries could pull
the end index off a page boundary near the last page. Clamp the
buffer expansion instead, so the final range stays page-aligned.
@vursen vursen force-pushed the fix/grid-viewport-range-page-alignment branch from cd3755c to a8fc44a Compare June 11, 2026 07:42
@sonarqubecloud

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant