Simplify loader animation

[jcfranco]

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

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

[ashetland]

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]

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.

[jacqueskeet]

From a design perspective, we'd like to propose simplifying the animation (based on the updated design in #4470) :

• Keep the track (grey circle) static;
• Animate the progress bar at 150ms transition speed;
• Keep animation the same per scale size;

Animation preview:

https://github.com/user-attachments/assets/4813ec2d-d160-4e14-a6db-8234e73f410f

[github-actions[bot]]

cc @geospatialem, @brittneytewks