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

Improve Spinner performance #1547

Closed
lbebber opened this issue Mar 5, 2021 · 2 comments · Fixed by #2384
Closed

Improve Spinner performance #1547

lbebber opened this issue Mar 5, 2021 · 2 comments · Fixed by #2384
Labels
enhancement New feature or request released This issue/pull request has been released. @theme-ui/components

Comments

@lbebber
Copy link

lbebber commented Mar 5, 2021

Is your feature request related to a problem? Please describe.
Right now, due to how the Spinner component is implemented, it increases the CPU usage, due to causing re-layouts on the page

(notice the layouts/sec and style recalc/sec measurements at the bottom, along with CPU usage at the top)
Screen Shot 2021-03-04 at 22 53 14

This is because animating an element of an SVG triggers this event (at least on Chrome 88 on desktop) and is not (fully?) GPU accelerated.

Describe the solution you'd like
A clear and concise description of what you want to happen.
Spinning a DOM element--for example, an entire SVG element, instead of just a part of it--fixes this issue.
Screen Shot 2021-03-04 at 22 51 41

This could be done without making any changes to the visuals of the spinner element as it is.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

@hasparus hasparus added the enhancement New feature or request label Mar 7, 2021
@hasparus
Copy link
Member

hasparus commented Mar 7, 2021

Thanks for the issue @lbebber! Great catch!

@lachlanjc lachlanjc linked a pull request Jan 16, 2023 that will close this issue
@hasparus hasparus added the prerelease This change is available in a prerelease. label Feb 7, 2023
@hasparus
Copy link
Member

hasparus commented Feb 7, 2023

🚀 Issue was released in v0.15.5 🚀

@hasparus hasparus added released This issue/pull request has been released. and removed prerelease This change is available in a prerelease. labels Feb 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request released This issue/pull request has been released. @theme-ui/components
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants