[Cascade] Resolve issue that caused "stuttering" in cascade component#251536
Conversation
|
Pinging @elastic/appex-sharedux (Team:SharedUX) |
|
/ci |
2e855cd to
9b77f54
Compare
| const getScrollMargin = useCallback(() => { | ||
| const sizeCache = virtualizer.virtualizedRowsSizeCache; | ||
| let margin = 0; | ||
| for (let i = 0; i < rowIndex; i++) { | ||
| margin += sizeCache.get(i) ?? 0; | ||
| } | ||
| return margin; | ||
| }, [virtualizer, rowIndex]); |
There was a problem hiding this comment.
We opt to count the size of the rows preceding the current row as the scroll margin.
9b77f54 to
238ccb9
Compare
238ccb9 to
b5a9601
Compare
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [docs]Module Count
Async chunks
Public APIs missing exports
cc @eokoneyo |
davismcphee
left a comment
There was a problem hiding this comment.
Works great, thanks for fixing it!
|
Friendly reminder: Looks like this PR hasn’t been backported yet. |
3 similar comments
|
Friendly reminder: Looks like this PR hasn’t been backported yet. |
|
Friendly reminder: Looks like this PR hasn’t been backported yet. |
|
Friendly reminder: Looks like this PR hasn’t been backported yet. |
Summary
Closes #246949
Previously scrolling through the nested list when its length exceeds the visible viewport, we'd notice an effect after scroll where the rendered items would shift around, this PR fixes this issue.
Context;
This happened because in discover determining the size of the element rendering the content of the nested virtualized list happens by measured the row items, so when content is rendered, given that it is contained in another virtual list that is also measured, the changes in the nested list would in turn cause a measurement to be triggered in the parent, causing the
scrolloffsetvalue with which the inner virtualized list was initialised with to be invalid, so the jank we see is the readjustment to the newscrollOffset, what we've opted for is to provide a way to disable propagating these changes to the parent whilst the user is interacting with the nested list.Visuals
How to test
FROM kibana_sample_data_ecommerce | STATS count = COUNT(*), PERCENTILE(products.price, 95), AVG(products.tax_amount), SUM(total_quantity) BY products.manufactureror yoursChecklist