search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
269 stars 75 forks source link

Simplify loader animation #8735

Open jcfranco opened 4 months ago

jcfranco commented 4 months ago

Description

Could we simplify loader's animation while retaining visual appeal and brand identity?

https://github.com/Esri/calcite-design-system/pull/8709 addressed an issue related to loader's complex animation dropping frames after a while in Chrome. The fix consists in using CSS' will-change prop, which helps with CPU usage, but ends up creating a layer per loader, leading to increased memory. Having a simplified loading animation could help us avoid using will-change without incurring a cost to performance.

Proposed Advantages

A simpler animation would not affect CPU and could help avoid using will-change to eliminate extra layer creation (increased memory usage).

Which Component

calcite-loader

Relevant Info

No response

Calcite package

ashetland commented 4 months ago

At a minimum, I think the color changes could be removed, but the animation could also be simplified. Our current animation might also feel a little slow, giving the user the feeling of poor performance.

pllcoster commented 1 month ago

Just adding a +1 to this ticket, since in Studio we are currently having to add some css overrides (as suggested by @jcfranco - thanks!) to get the Calcite loader animation running when the JS thread is blocked by work.