refactor: make virtualizer use dynamic placeholder height #3908
Conversation
| // After running super._scrollHandler, fix _virtualStart to workaround an iron-list issue. | ||
| // See https://github.com/vaadin/web-components/issues/1691 | ||
| const reusables = this._getReusables(true); | ||
| this._physicalTop = reusables.physicalTop; | ||
| this._virtualStart += reusables.indexes.length; | ||
| this._physicalStart += reusables.indexes.length; | ||
| const isScrollingDown = delta >= 0; | ||
| const reusables = this._getReusables(!isScrollingDown); | ||
|
|
||
| if (reusables.indexes.length) { | ||
| // After running super._scrollHandler, fix internal properties to workaround an iron-list issue. | ||
| // See https://github.com/vaadin/web-components/issues/1691 | ||
| this._physicalTop = reusables.physicalTop; | ||
|
|
||
| if (isScrollingDown) { | ||
| this._virtualStart -= reusables.indexes.length; | ||
| this._physicalStart -= reusables.indexes.length; | ||
| } else { | ||
| this._virtualStart += reusables.indexes.length; | ||
| this._physicalStart += reusables.indexes.length; | ||
| } | ||
| this._resizeHandler(); | ||
| } |
There was a problem hiding this comment.
Not directly related to this change: a forward-port of vaadin/vaadin-grid#2217 to fix some tests that started failing
|
Kudos, SonarCloud Quality Gate passed!
|
|
Hi @tomivirkki , this commit cannot be picked to 23.0 by this bot, can you take a look and pick it manually? |
Backporting this to earlier minors shouldn't be necessary, since pretty much the only affected component is the Flow |
|
This ticket/PR has been released with Vaadin 23.1.0.rc1 and is also targeting the upcoming stable 23.1.0 version. |
Part of vaadin/flow-components#3206
Using the static value of
200pxfor the placeholder height doesn't play well when the actual item height is much smaller.Note: this is only an issue in the rare cases where the items have the intrinsic height of 0 after an update and then asynchronously increase in height.
This PR updates Virtualizer to dynamically update the placeholder height to be the average of the 10 previous actual item heights. Having the placeholder height be as close as possible to the actual item heights results in much nicer scrolling UX:
Static placholder height (of 200px):
static-placeholder-height.mp4
Dynamic placeholder height:
dynamic-placeholder-height.mp4