-
Notifications
You must be signed in to change notification settings - Fork 77
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
fix(loader): optimize animation performance #8714
fix(loader): optimize animation performance #8714
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would be cool to get a primer on will-change
and also consider the real "why" behind the animation slowness, but this LGTM as a quick fix.
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change |
I found these to be really useful resources:
The reason for the slowdown boils down to the loader having a complex animation that is constantly running. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
1️⃣ Line 🪄 ✨
💯
**Related Issue:** #8709 ## Summary Improves performance by using `will-change` to hint at browsers to render animations in a separate layer, reducing repaints. ### Current <img width="1142" alt="Screenshot 2024-02-08 at 11 01 37 PM" src="https://github.com/Esri/calcite-design-system/assets/197440/fb36dfb1-7cf8-4c1d-9d32-6d027b68e6f9"> <img width="1113" alt="Screenshot 2024-02-08 at 11 00 19 PM" src="https://github.com/Esri/calcite-design-system/assets/197440/b7263c18-a728-4e88-a404-68aa83705b0f"> ### Optimized (`will-change: contents`) <img width="1104" alt="Screenshot 2024-02-08 at 11 00 41 PM" src="https://github.com/Esri/calcite-design-system/assets/197440/51a03530-471f-493f-a183-a527d1e1b65f"> <img width="1157" alt="Screenshot 2024-02-08 at 11 00 59 PM" src="https://github.com/Esri/calcite-design-system/assets/197440/3ef2a801-992a-449e-a150-65b8d489c5be">
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 2.5.0</summary> ## [2.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.4.0...@esri/calcite-components@2.5.0) (2024-02-15) ### Features * **stepper:** Add horizontal-single layout ([#8742](#8742)) ([c34bc4f](c34bc4f)) * **table:** Add `interactionMode` property to control focus behavior ([#8686](#8686)) ([0cb78c0](0cb78c0)) * **table:** Improve accessibility of interaction-mode: static Table ([#8754](#8754)) ([eead1b5](eead1b5)) * **tile:** Add responsive layout features ([#8691](#8691)) ([f4f872e](f4f872e)) ### Bug Fixes * **color-picker:** Alpha-channel slider scope updates to reflect current opacity ([#8700](#8700)) ([cd0b532](cd0b532)) * **combobox:** Avoid inline-start padding on combobox label when icon is displayed ([#8672](#8672)) ([9eb680a](9eb680a)) * Don't override existing validationMessage when displaying after form submission ([#8690](#8690)) ([3076220](3076220)) * Fix dragging items on a mobile device ([#8751](#8751)) ([dc11612](dc11612)) * Fix styling when dragging items on a mobile device ([#8750](#8750)) ([7c01e6e](7c01e6e)) * **input, input-number, input-text, text-area:** Ensure all applicable props are considered in form validation ([#8655](#8655)) ([6de8534](6de8534)) * **list-item:** Fix slotted list border styling. ([#8712](#8712)) ([855f98d](855f98d)) * **loader:** Optimize animation performance ([#8714](#8714)) ([1ed8a01](1ed8a01)) * **preset:** Add back legacy token for calcite-ui-focus-color ([#8694](#8694)) ([1d1b933](1d1b933)) * Prevent interaction when component is disabled after initialization (Firefox) ([#8746](#8746)) ([aa84182](aa84182)) * **stepper:** No longer adds default `min-width` for items when `layout='horizontal'` ([#8758](#8758)) ([23a7439](23a7439)) ### Reverts * Fix(panel, flow-item): remove overflow rule ([#8711](#8711)) ([21226ce](21226ce)) </details> <details><summary>@esri/calcite-components-angular: 2.5.0</summary> ## [2.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.4.0...@esri/calcite-components-angular@2.5.0) (2024-02-15) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.5.0-next.6 to ^2.5.0 </details> <details><summary>@esri/calcite-components-react: 2.5.0</summary> ## [2.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.4.0...@esri/calcite-components-react@2.5.0) (2024-02-15) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.5.0-next.6 to ^2.5.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Related Issue: #8709
Summary
Improves performance by using
will-change
to hint at browsers to render animations in a separate layer, reducing repaints.Current
Optimized (
will-change: contents
)