fix(loader): optimize animation performance (#8714)

**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">

packages/calcite-components/src/components/loader/loader.scss

@@ -32,6 +32,7 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
   animation: loader-color-shift scaleDuration(--calcite-internal-animation-timing-slow, 2) alternate-reverse infinite
     linear;
   padding-block: var(--calcite-loader-padding, theme("spacing.16"));
+  will-change: contents;
 }
 
 :host([scale="s"]) {