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" />

[benjibee]

@joshhanley I just want to bump this here, as I don't want to open an issue but I don't exactly think this is a feature request, either. I don't see any other way to use the loading example in the docs.

[bbredewold]

I like to bump it too. Can you provide a code snippet for the example in the documentation?

I tried to do something like wire:loading.icon-trailing="loading" on the input, but that has no effect.

[benjibee]

I just mean the provided example of using trailing icons in inputs:

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

[bbredewold]

Ah, I'm sorry Benji, I meant to add a comment, not a reply to you :)