Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Components: Try disabling NavigatorScreen animations completely #56795

Closed
wants to merge 1 commit into from

Conversation

tyxla
Copy link
Member

@tyxla tyxla commented Dec 5, 2023

DO NOT MERGE

What?

This is an experiment that allows us to try out disabling only the NavigatorScreen animations, without tinkering with any other existing animations or existing motion throughout the application.

Why?

To demonstrate that the animations of NavigatorScreen tend to be among the primary reasons for the slow performance of the site editor when navigating between pages and templates, as reported in #55892

This hints that we might need to rewrite those animations to not use framer-motion but just pure CSS instead to leverage hardware acceleration and avoid the already complex painting work that the browser has to do with the editor canvas iframe.

How?

We're just disabling the NavigatorScreen enter/exit animations.

We could alternatively try out by emulating prefers-reduced-motion, but this disables other animations too, which we don't want for this experiment.

Testing Instructions

  • Start with the latest WordPress
  • Throttle your CPU to simulate a slower device.
  • Install and activate the TT4 (Twenty Twenty-Four) theme
  • Navigate between pages or templates and go back
  • You'll see the UI stuck at animating the site editor sidebar.
  • On slower devices, you'll see the UI unresponsive for many seconds.

Testing Instructions for Keyboard

None

Screenshots or screencast

None

@tyxla tyxla added [Type] Performance Related to performance efforts [Status] Blocked Used to indicate that a current effort isn't able to move forward [Package] Components /packages/components labels Dec 5, 2023
@tyxla tyxla self-assigned this Dec 5, 2023
Copy link

github-actions bot commented Dec 5, 2023

Flaky tests detected in a7124b0.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7104328272
📝 Reported issues:

@tyxla
Copy link
Member Author

tyxla commented Dec 13, 2023

This PR has done its purpose.

There's an obviously better alternative that refactors animations to use CSS instead of framer motion: #56909

Closing this one.

@tyxla tyxla closed this Dec 13, 2023
@tyxla tyxla deleted the try/disable-navigator-screen-animations branch December 13, 2023 11:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Status] Blocked Used to indicate that a current effort isn't able to move forward [Type] Performance Related to performance efforts
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant