Add loading support to inputs

[joshhanley]

The scenario

Currently if an input is used for search or something like that, there is no easy way to get the trailing icon to display a spinner when a Livewire request is happening.

<flux:input wire:model.live="search" icon-trailing="loading" placeholder="Search transactions" />

Instead you have to use slots.

<flux:input wire:model.live="search" placeholder="Search transactions">
    <x-slot:trailing-icon>
        <flux:icon.loading wire:loading wire:target="search" />
    </x-slot>
</flux:input>

The proposal

This PR adds support for the following API mapped out by @calebporzio here #1286 (comment).

<flux:input wire:model="search" />{{-- no loading indicator ever --}}
<flux:input wire:model.live="search" />{{-- loading indicator when request is out --}}
<flux:input wire:model.live="search" :loading="false" />{{-- no loading indicator ever --}}
<flux:input loading />{{-- always show loading indicator --}}
<flux:input loading="foo" />{{-- show loading indicator when a request is out for the foo property (wire:loading + wire:target type deal) --}}

Trailing icon/ control issue

The only issue with the implementation is what should happen if there are currently any trailing icons or extra controls like copyable, clearable, etc.?

Volt component for testing

<?php

use Livewire\Volt\Component;

new class extends Component {
    public $search;
    public $foo;

    public function updated()
    {
        sleep(2);
    }

    public function submit()
    {
        sleep(2);
    }
}; ?>

<div>
    <form wire:submit="submit">
        <flux:input as="button">Should there be a loading indicator for this button?</flux:input>
        <flux:input label="No loading indicator ever" wire:model="search" />
        <flux:input label="Loading indicator when request is out" wire:model.live="search" />
        <flux:input label="No loading indicator ever" wire:model.live="search" :loading="false" />
        <flux:input label="Always show loading indicator" loading />
        <flux:input label="Show loading indicator when a request is out for the foo property (wire:loading + wire:target type deal)" loading="foo" />
        <flux:input wire:model="foo" />


        <flux:input label="Keyboard Shortcut" loading kbd="⌘K" />
        <flux:input label="Icon Trailing" loading icon-trailing="credit-card" />
        <flux:input label="Expandable" loading expandable />
        <flux:input label="Clearable" loading clearable />
        <flux:input label="Copyable" loading copyable />
        <flux:input label="Viewable" loading viewable />

        <flux:button type="submit">Submit</flux:button>

        <flux:icon name="loading" wire:loading wire:target="search" class="mt-4" />
    </form>
</div>

Fixes #1286

[stahlit]

Nice addition.

"The only issue with the implementation is what should happen if there are currently any trailing icons or extra controls like copyable, clearable, etc.?"

Hide the trailing icon/extra control during loading I think would be a nice solution?

My first thought atleast.