fix(skeleton): use opacity instead of background-color

[kevinlee11]

Describe the problem this PR addresses

Lighthouse analysis led to recommend using opacity for the skeleton loaders for better performance (https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count).

Anecdotally, testing locally, I did notice an improvement in the animation with less jag using opacity when simulating on our larger sites with a mid-tier mobile device.

Describe the changes in this PR

Switch to using opacity for the skeleton loaders.

https://github.com/square/maker/assets/18740390/7d2048a7-2456-420a-93dc-08ad308fd8e8

https://github.com/square/maker/assets/18740390/a6178240-7316-4b97-828a-3afd6ade53e9

[github-actions[bot]]

Deployed Styleguide and Lab.

Notes

1. Links may take a few minutes to update after PR is opened or commit is pushed.
2. Links may become invalidated after PR is merged or closed.
3. Links for all releases and open PRs can be found on the Maker Deploys page.

[privatenumber]

Great article! I'm fine with this change. Thanks for providing the videos for demonstration.

However, we should be aware that there might be unexpected behavior due to the element animating transparency. For instance, if it's on a blue background, the color of the skeleton could differ because the blue background might be visible through the skeleton.

[kevinlee11]

Yup, good callout! It is pretty close, here's a vid with a red card background

https://github.com/square/maker/assets/18740390/ec832a4a-8ae5-4926-bd8d-11803257449f

[github-actions[bot]]

:tada: This PR is included in version 19.6.3 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: