Turn off syncAnimationRestarts for chromatic and buttons

[jgzuke]

Add syncAnimationRestarts (default true) prop to LoadingSpinner to replace usage of isChromatic. Also set to false in stories and buttons. We only really need it false in stories but this seemed easier than passing the syncAnimationRestarts prop to buttons as well, it also seemed like it would look more natural if button loaders weren't synced.

Im a bit conflicted about whether this should default to false instead. I feel like the default makes more sense to be false since we only really want this for our full page loaders, however it seems likely for people to miss setting the prop. This is mitigated a bit if we only use the engine wrappers instead of this component directly.

[justinanastos]

I can't think of a better way to solve this 🤷‍♂ ; left one question. Answer and I'll re-review 😃

[justinanastos]

This is failing CI. Please take a look and toss it back for review

[justinanastos]

You also forgot to add a label.

[justinanastos]

Thanks for this @jgzuke ! I left one minor to add a comment, then merge away!

[justinanastos]

minor: I'm sorry I keep doing this, but please add a jsdoc comment explaining what this does so we can see that from AGM. After that, merge away!

[justinanastos]

This is going to cause issues for Chromatic tests in libraries consuming this package. I'm struggling to think of a solid solution to make this safe for consuming libraries while also not including chromatic in the tests. I am also running into the same issue for disabling animations in Modals.

Here's a hacky thought: what if we added a static property to the component itself that would disable the animation? That way we can do something like LoadingSpinner.animationSync = false in the storybook/chromatic setup and then all loaders would behave as we expect for visual testing.

[justinanastos]

This is going to cause issues for Chromatic tests in libraries consuming this package. I'm struggling to think of a solid solution to make this safe for consuming libraries while also not including chromatic in the tests. I am also running into the same issue for disabling animations in Modals.

Here's a hacky thought: what if we added a static property to the component itself that would disable the animation? That way we can do something like LoadingSpinner.animationSync = false in the storybook/chromatic setup and then all loaders would behave as we expect for visual testing.

[justinanastos]

Thanks for working through this with me @jgzuke !

[apollo-bot2]

🚀 PR was released in v2.19.0 🚀