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.

Sign up for GitHub

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

Jump to bottom

fix(skeleton): updates skeleton state performance #7965

Merged
merged 2 commits into from
Mar 4, 2021
Merged

fix(skeleton): updates skeleton state performance #7965

merged 2 commits into from
Mar 4, 2021

Conversation

tw15egan
Copy link
Collaborator

@tw15egan tw15egan commented Mar 3, 2021

Closes #7850

Animations involving width are costly and have performance drawbacks. This PR updates the Skeleton state animation to use transform and will-change to improve performance by utilizing the GPU and eliminating canvas redraws

Changelog

New

  • Skeleton animation now uses transform

Changed

  • Changed browser list export to correct syntax

Removed

  • Remove browserlist option in gulpfile to eliminate warning when running yarn dev in the components repo

Testing / Reviewing

Open up a skeleton component, open Chrome Dev tools, then ⌘ CMD+SHIFT+P, then type render

Once there, check Paint Flashing and ensure there are no redraws

Perf Before:
Screen Shot 2021-03-03 at 12 21 06 PM

Perf After:
Screen Shot 2021-03-03 at 12 21 53 PM

@tw15egan tw15egan requested a review from a team as a code owner March 3, 2021 20:50
@tw15egan tw15egan requested review from joshblack and emyarod March 3, 2021 20:50
@netlify
Copy link

netlify bot commented Mar 3, 2021 •
edited
Loading

Deploy preview for carbon-elements ready!

Built with commit d2dbf14

https://deploy-preview-7965--carbon-elements.netlify.app

@netlify
Copy link

netlify bot commented Mar 3, 2021 •
edited
Loading

Deploy preview for carbon-components-react ready!

Built with commit d2dbf14

https://deploy-preview-7965--carbon-components-react.netlify.app

@tw15egan tw15egan mentioned this pull request Mar 3, 2021
Merged
4 tasks
emyarod
emyarod approved these changes Mar 4, 2021
View reviewed changes
Copy link
Member

@emyarod emyarod left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good to me

@kodiakhq kodiakhq bot merged commit 4a3955e into carbon-design-system:master Mar 4, 2021
@dakahn dakahn mentioned this pull request Mar 4, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@emyarod emyarod emyarod approved these changes

@joshblack joshblack joshblack approved these changes

Assignees
No one assigned
Labels
status: ready to merge 🎉
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Optimise skeleton state animations
3 participants
@tw15egan @joshblack @emyarod