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

calcite-loader performance issue in Chrome #8709

Closed
2 of 6 tasks
adepottey opened this issue Feb 8, 2024 · 5 comments
Closed
2 of 6 tasks

calcite-loader performance issue in Chrome #8709

adepottey opened this issue Feb 8, 2024 · 5 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. has workaround Issues have a workaround available in the meantime. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality Workflow Manager Issues logged by Workflow Manager team members.
Milestone
2024-02-15 - Feb ...

Comments

@adepottey
Copy link

adepottey commented Feb 8, 2024 •
edited
Loading

Check existing issues

Actual Behavior

When the Loader component (indeterminate) is on a page, the "Google Chrome Helper (Renderer)" process CPU utilization begins climbing and we begin to see rendering responsiveness issues elsewhere on the page. The behavior can be observed on the the doc page for the loader: https://developers.arcgis.com/calcite-design-system/components/loader/
We do not see the same impact on responsiveness or CPU utilization on Firefox.

Expected Behavior

CPU utilization remains stable and does not negatively impact other elements on the page

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/loader/

Reproduction Steps

  1. Open Activity Monitor or Task Manager on your machine
  2. Open the page containing calcite-loader indeterminate component
  3. See the CPU utilization begin climbing and page responsiveness for rendering-heavy components begin to be impacted

Reproduction Version

2.3

Relevant Info

MacOS 14.1.2 (23B92)
Version 121.0.6167.139 (Official Build) (x86_64)

Regression?

No response

Priority impact

p1 - need for current milestone

Impact

No response

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

Workflow Manager
@adepottey adepottey added 0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Feb 8, 2024
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone Workflow Manager Issues logged by Workflow Manager team members. labels Feb 8, 2024
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Feb 8, 2024
@jcfranco jcfranco self-assigned this Feb 8, 2024
@jcfranco jcfranco added estimate - 3 A day or two of work, likely requires updates to tests. p - high Issue should be addressed in the current milestone, impacts component or core functionality and removed needs triage Planning workflow - pending design/dev review. labels Feb 8, 2024
@jcfranco jcfranco mentioned this issue Feb 9, 2024
Merged
jcfranco added a commit that referenced this issue Feb 9, 2024
@jcfranco
fix(loader): optimize animation performance (#8714)
1ed8a01 
**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">
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Feb 9, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Feb 9, 2024

Installed and assigned for verification.

@aart7367
Copy link

@geospatialem @jcfranco @DitwanP This is a pretty significant issue for Workflow Manager and is a must-have fix for R1 release.
Are you planning to release this fix before R1?
Would this change be picked up by the JS API team?

@jcfranco
Copy link
Member

jcfranco commented Feb 12, 2024 •
edited
Loading

I can't speak to the JS API picking it up, but the fix is available on @next. We could also coordinate a maintenance release if it will get picked up. cc @bsvensson @dasa

As a workaround, if you own the loaders, you could apply the following style in the meantime (same as the fix):

calcite-loader {
  will-change: contents;
}

Note: this workaround won't affect loaders that are used internally by other components (i.e., loaders showing up when toggling a component's loading property).

@jcfranco jcfranco added the has workaround Issues have a workaround available in the meantime. label Feb 12, 2024
@dasa
Copy link
Member

dasa commented Feb 12, 2024

Would this change be picked up by the JS API team?

The @arcgis/core@rc release currently has this dependency: @esri/calcite-components: ^2.4.0

This means it'll accept: 2.4.0 <= version < 3.0.0

@jcfranco jcfranco mentioned this issue Feb 13, 2024
Closed
5 tasks
@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Feb 13, 2024
@geospatialem
Copy link
Member

geospatialem commented Feb 13, 2024 •
edited
Loading

Verified with Chrome Version 121.0.6167.161 and Windows with task manager in 2.5.0-next.2.

Elijbet pushed a commit that referenced this issue Feb 15, 2024
@jcfranco @Elijbet
fix(loader): optimize animation performance (#8714)
9456779 
**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">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. has workaround Issues have a workaround available in the meantime. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality Workflow Manager Issues logged by Workflow Manager team members.
Projects
None yet
Milestone
2024-02-15 - Feb Maintenance Release
Development

No branches or pull requests
6 participants
@jcfranco @dasa @geospatialem @adepottey @aart7367 @DitwanP