add automatic "loading" state for Vue Button component

[dadaxr]

The new Statamic "Button" component ( https://ui.statamic.dev/?path=/docs/forms-button--docs ) has a "loading" attribute to disable it state (& prevent clicking).

It seems this Button component is a supercharged inertia Link component... So we can use all props available on Inertia Links like the "method" and "href" (to do directly some Post Request) .

Inertia Link component is auto setting a "data-loading" attribute (https://inertiajs.com/docs/v2/the-basics/links#data-loading-attribute) , but for now, it's unrelated to the "loading" prop of the Statamic Button component ...

It would be great to have another props on the Button Component (like "auto-loading-state" : true / false) which would automatically handle that binding for us...

For now we have to manually set the loading prop to true/false using the inertia manual router visit & "onBefore" and "onFinish" callbacks (https://inertiajs.com/docs/v1/the-basics/manual-visits#event-callbacks)

What do you think ?

[jasonvarga]

First thought is that we could probably wire up the inertia loading state to the button's loading state by default. Only override the behavior if you explicitly use the loading prop.

[dadaxr]

Also maybe, add a way to choose the behavior of the loading icon... because the default behavior (ie adding a spinner) feels a bit off to me when the button already has an icon (it shows 2 icons side by side) :

Maybe by default replace the current icon if any, but add a way to choose to do not display any spinner (which can cause button width ajustement). ie : A prop "loading-icon-behavior: none | replace (the default)