<?php

use Livewire\Volt\Component;

new class extends Component {
    public $show = true;

    public function test()
    {
        sleep(5);
    }
};

?>

<div>
    <p>This one demonstrates the problem:</p>
    <flux:button icon="arrow-path" variant="primary" wire:click="test">
        {{-- `sm:inline` normally added here to show icon and "Refresh" label on desktop and icon only on mobile --}}
        {{-- Setting to just `hidden` allows us to see the problem on desktop --}}
        <span class="hidden">Refresh</span>
    </flux:button>

    <p>This shows it working fine when we remove `wire:click`:</p>
    <flux:button icon="arrow-path" variant="primary">
        {{-- `sm:inline` normally added here to show icon and "Refresh" label on desktop and icon only on mobile --}}
        {{-- Setting to just `hidden` allows us to see the problem on desktop --}}
        <span class="hidden">Refresh</span>
    </flux:button>

    <p>
        The problem is due to the `wire:click` on the first button, the button component wraps the slot in a<br />
        `&lt;span&gt;&lt;/span&gt;` to ensure there is a target element to change the opacity of the button contents<br />
        when `wire:loading` is running and the loading element is shown. But this is a `gap-2` applied to<br />
        the button which is being shown even when there are no slot contents, due to the wrapping span.
    </p>
</div>