List View: fix pagedown/pageup and improve scrolling #36063
Merged
Conversation
This file contains 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
gwwar
added
[Type] Performance
|
Size Change: +28 B (0%) Total Size: 1.08 MB
ℹ️ View Unchanged
|
|
Perf results: (As expected there isn't any regressions in list view open). |
|
With the list view block memo, I do need to move back querying selected state on the parent component to avoid having multiple items lag (with the selected styling when we add blocks). With manual testing I don't think this should degrade block focus times, but I updated the typing/focus test to have list view open in 5f1d64a
|
|
Nice, it looks like focus results (with list view open) are reasonable, and there are no changes to list view open. This one is ready for review 👍 |
|
I took this for a spin in Chrome, Firefox and Safari using a post with 385 blocks and nesting up to 5 layers deep. Here's what I'm seeing: Nov-01-2021.13-40-49.mp4I compared visually with trunk and noticed no real differences in rendering speed or the lag in element interactivity. I ran the React Performance profiler while opening the List View panel, then scrolling to the bottom. For this action, React Profiler tells me that the BlockListView is rendered far fewer times (yellow bars): Trunk: This branch: |
|
Thanks for testing @ramonjd ✨ @talldan @youknowriad what do you think of changes here? Would it be possible to have this land before code freeze? |
|
Dropped changes to the performance test suite (that run typing and focus tests with list view open). See #36063 (comment) for how changes in this PR affect performance when list view is open. |
…o avoid multiple items being styled as selected when they are not
gwwar
force-pushed
the
try/list-view-drag-scroll
branch
from
e149f24 to
39eb49e
Compare
|
@mkaz I'm keeping half an eye on this one, but would it be possible to see if we can get some 👀 to help land this one? I think at a minimum we'll want to have the pageup/pagedown fix. Adding in the list view block memo + selectedIds, should help bulletproof block focus performance when list view is open. It's pretty easy to regress at the moment accidentally. |
|
Tested this in Firefox 94 with 800 blocks, and the scrolling performance is noticeably much better! Dragging blocks triggers the interface much faster too, although it still feels too slow to trigger reliably. It's probably better to get this merged and then iterate on the dragging trigger later. |
mkaz
approved these changes
Nov 4, 2021
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.
Follow up to #35230, this PR improves scrolling in List View by:
Why the memo? When we scroll the list of virtualized items we should render changes. This object is passed to the branch component, and when that branch updates all children of that branch render too. By memoing we avoid needing to re-render all items in the window.
I think this can be improved further, but we can tackle that in future profiling passes.
Testing Instructions
Example of ListView scroll with ~900 blocks:
CleanShot.2021-10-28.at.16.07.23.mp4