Fix: Improve perceived performance of DataViews layouts #73426
Conversation
fabiankaegy
requested review from
ajitbohra,
gigitux,
ntsekouras and
oandregal
as code owners
fabiankaegy
added
[Type] Enhancement
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
add components changelog
add dataviews changelog
fabiankaegy
force-pushed
the
fix/data-views-precieved-performance
branch
from
3825a21 to
c414644
Compare
|
Flaky tests detected in c414644. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/19495304677
|
| } | ||
| /> | ||
| <Menu.Popover> | ||
| <Menu.Popover modal={ false }> |
There was a problem hiding this comment.
I think we need portal preventBodyScroll.
portal to avoid this:
Screen.Recording.2025-11-19.at.12.42.09.PM.mov
preventBodyScroll to avoid this (if we only have set portal:
Screen.Recording.2025-11-19.at.12.43.28.PM.mov
We need to check for similar cases in the updated components. For example this seems a bit weird:
Screen.Recording.2025-11-19.at.12.44.08.PM.mov
There was a problem hiding this comment.
Thanks for testing :)
portal makes sense and I already had it in all the places I noticed issues like this 👍 Updating to apply it to this here also.
preventBodyScroll I've tried adding it but it doesn't seem to have any effect 🤔 Could it be that it only locks actual body scrolling but not other scroll regions?
There was a problem hiding this comment.
Yeah I've verified that this is the issue.
Since I cannot really see a good way to solve this without a bunch of custom complexity I've reverted the two menus (filter and layout) to the modal behavior. All the other ones like inline actions and table headers still use the new behavior. All with portal and without the preventBodyScroll prop 👍
| DURATION: { | ||
| IN: '400ms', | ||
| OUT: '200ms', | ||
| IN: '200ms', |
There was a problem hiding this comment.
I think the 200ms might be okay, but not sure if it becomes 'clanky' for bigger menus. I don't have some specific use case in mind, but just noting that this affects every menu consumer.
What?
Closes #73424
This pull request updates the behavior and visual experience of menu popovers used within the DataViews component. The most significant changes involve switching menu popovers to non-modal mode and adjusting animation durations for smoother transitions.
Why?
To make the UI feel more snappy.
How?
Updating the animation duration and switching to the non modal mode which allows interacting with other elements whilst dropdown are open
Screenshots or screencast
Before:
CleanShot.2025-11-19.at.09.33.52.mp4
After:
CleanShot.2025-11-19.at.09.33.26.mp4