Update flux.css to fix loading state error of a submit button

[fdteam-deanie]

Fix error that the text of a button which has type="submit" disappeared as also the state "loading" does not appear as properly.

The scenario

1. Prepare a submit button to make "loading" state when clicked:

<flux:button variant="primary" icon="paper-airplane" class="w-full" type="submit">Submit now</flux:button>

2. Click the button to submit form or perform long action, then you will see the text "Submit now" is disappeared or might have some unnecessary spaces between.

The problem

• Perform a loading mode of a submit button does not show text and the state "loading" does not appear as properly.
• Reported at Button's loading icon not showing if wire:click has space after the method name #1639.
• Video of the error before apply PR:

before.mov

The solution

• Override css to show and center the Flux loading spinner inside disabled buttons and keep label text visible and collapse gap while loading (when button is disabled).
• Video of successfully fixed after apply PR:

after.mov

Fixes livewire/flux#

[ju5t]

I don't think this is a bug but expected behavior.

Having said that, I do like the idea of the loading indicator replacing the icon. It has a cleaner look. The difficulty is what do you do when there are 2 icons, which do you replace?

Your PR overrides logic from the button component. That's fine in your own project, but it's not for Flux. There is no reason for this to live in flux.css as it can be done with Tailwind classes inside the component itself.

    ->add($loading ? [ // Loading states...
        '*:transition-opacity',
        $type === 'submit' ? '[&[disabled]>:not([data-flux-loading-indicator])]:opacity-0' : '[&[data-flux-loading]>:not([data-flux-loading-indicator])]:opacity-0',
        $type === 'submit' ? '[&[disabled]>[data-flux-loading-indicator]]:opacity-100' : '[&[data-flux-loading]>[data-flux-loading-indicator]]:opacity-100',
        $type === 'submit' ? '[&[disabled]]:pointer-events-none' : 'data-flux-loading:pointer-events-none',
    ] : [])

#1639 is unrelated to this by the way.

[fdteam-deanie]

I don't think this is a bug but expected behavior.

Having said that, I do like the idea of the loading indicator replacing the icon. It has a cleaner look. The difficulty is what do you do when there are 2 icons, which do you replace?

Your PR overrides logic from the button component. That's fine in your own project, but it's not for Flux. There is no reason for this to live in flux.css as it can be done with Tailwind classes inside the component itself.

    ->add($loading ? [ // Loading states...
        '*:transition-opacity',
        $type === 'submit' ? '[&[disabled]>:not([data-flux-loading-indicator])]:opacity-0' : '[&[data-flux-loading]>:not([data-flux-loading-indicator])]:opacity-0',
        $type === 'submit' ? '[&[disabled]>[data-flux-loading-indicator]]:opacity-100' : '[&[data-flux-loading]>[data-flux-loading-indicator]]:opacity-100',
        $type === 'submit' ? '[&[disabled]]:pointer-events-none' : 'data-flux-loading:pointer-events-none',
    ] : [])

#1639 is unrelated to this by the way.

I completely understand that overriding flux.css is not the ideal approach and agree that it should only be considered a temporary workaround for this specific scenario from my case.

That said, the main issue I wanted to highlight is that the button text disappears entirely during the loading state. When multiple buttons are displayed side by side, this behavior results in inconsistent alignment and spacing, which leads to a noticeably poor user experience — one button appears to collapse or vanish while the others remain unchanged.

My goal with this PR was primarily to bring attention to this UX inconsistency, rather than to propose the final technical solution. I agree that handling this within the component itself, rather than in global CSS, would be a cleaner and more maintainable long-term fix.