bug(calcite-button): double-jump on loading=false when prefers-reduced-motion:reduce

[maxpatiiuk]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Actual Behavior

When calcite-button had loading="true", and you change that to loading="false", the button's width jumps twice - firstly, the gap between loader and button's content is removed, and after a brief delay, the loader itself is removed:

https://github.com/Esri/calcite-design-system/assets/40512816/52b0ed90-582a-4042-8f79-a5cc83818ef3

Expected Behavior

Loader and the gap should be removed simultaneously and immediatly

Reproduction Sample

https://codepen.io/maxpatiiuk/pen/poYbEmZ

Reproduction Steps

1. Click on a button in the codesample above
2. After loader is removed, see button jump twice

Reproduction Version

2.1.0

Relevant Info

Note: to reproduce this bug, you need to have prefers-reduced-motion: reduce set in your OS settings or DevTools emulation:

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

minor

Calcite package

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

Esri team

ArcGIS Maps SDK for JavaScript

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

🍡 Verified on 2.12.0-next.4

https://github.com/user-attachments/assets/06ad9e9b-670b-4d74-bb2b-d4f53fe53095