Loadable attribute for inputs

[benjibee]

The documentation has quite an elegant example of an inset loader on an input:

<flux:input icon-trailing="loading" placeholder="Search transactions" />

I might be missing something but how exactly would this be used with Livewire? I can use <flux:field> here and recreate the icon element from the input component as such:

<flux:field>
    <flux:label>Search</flux:label>

    <div class="relative">
        <flux:input wire:model.live="search" placeholder="Search transactions" />

        <div wire:loading class="pointer-events-none absolute top-2 bottom-0 flex items-center justify-center text-xs text-zinc-400/75 pr-3 right-0">
            <flux:icon icon="loading" variant="mini" />
        </div>
    </div>

    <flux:error name="search" />
</flux:field>

But this doesn't seem like a great solution. I could imagine something along the lines of copyable, viewable, etc.

<flux:input wire:model.live="search" placeholder="Search transactions" loadable />

{{-- With target specified --}}
<flux:input wire:model.live="search" placeholder="Search transactions" loadable="term" />

Originally posted by @benjibee in #332

[calebporzio]

Good point, here's an API I could envision. What are everyone's thoughts?

<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)

[benjibee]

Good point, here's an API I could envision. What are everyone's thoughts?

This looks like a good solution to me, and it would solve my use case 👍

[joshhanley]

Yep I agree too! Will see if I can get it running 😁

[joshhanley]

I've submitted a PR with this implementation