Fix loading spinner issue on variant change

[ludoboludo]

Why are these changes introduced?

Fixes #636

What approach did you take?

I moved the spinner outside of the button and added it as the next sibling element of the atc. This way the element isn't removed on variant changed (it was before as we update the textContent of the atc button).

Also added some product/feat. product specific styling to place the spinner relative to the button form.

Other considerations

Some options I considered:

• Using the svg file as a pseudo element. But I couldn't animate the path properly to match the animation like in the rest of the theme.
• I could move the spinner outside of the product-form__buttons element and position it absolutely, relative to the form. I will give this a try and report back. Edit: looks good this way.
• Use JS to re insert the spinner element on variant change. But more JS isn't ideal.

Demo links

• Store

Checklist

• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[KaichenWang]

This works fine, but maybe another approach would be to wrap the button label in a <span> and replace the textContent of only the label instead of the whole button?

I feel like toggleAddButton() is making an incorrect assumption that the add-to-cart button can only contain text and no children, so perhaps this root cause should be addressed.

[ludoboludo]

Good point @KaichenWang 🤔 I've changed the approach following your suggestion. Let me know what you think :)

[KaichenWang]

Works well

[LucasLacerdaUX]

Works as expected! :dancing-razz:

The <span> idea was really nice and didn't break the layout :D