wire:loading

Overview

Using wire:loading, you can show and hide elements in your templates while a request is sent to the server.

// ./wires/MyForm.cfc
component extends="cbwire.models.Component" {
    function save() {
        sleep( 2000 ); // pretend we're saving to the database
    }
}

<!--- ./wires/myform.cfm --->
<div>
    <form wire:submit="save">
        <button type="submit">Save</button>
        <span wire:loading>
            Saving...
        </span>
    </form>
</div>

After clicking the save button, you will briefly see the saving loading indicator. Once the save completes, the loading indicator goes away.

Removing Elements

You can instead show elements by default and hide them during requests to the server using wire:loading.remove.

<!--- ./wires/myform.cfm --->
<div>
    <form wire:submit="save">
        <button type="submit" wire:loading.remove>Save</button>
        <span wire:loading>
            Saving...
        </span>
    </form>
</div>

Now the save button will disappear until the save completes.

Toggling Classes

You can toggle classes using wire:loading.class.

<!--- ./wires/myform.cfm --->
<div>
    <form wire:submit="save" wire:loading.class="opacity-50">
        <button type="submit">Save</button>
    </form>
</div>

You can also remove classes using wire:loading.class.remove.

<!--- ./wires/myform.cfm --->
<div>
    <form
        wire:submit="save"
        class="highlighted"
        wire:loading.class.remove="highlighted">
        <button type="submit">Save</button>
    </form>
</div>

Toggling Attributes

You can toggle attributes using wire:loading.attr.

<!--- ./wires/mybutton.cfm --->
<div>
    <button
        type="button"
        wire:click="save"
        wire:loading.attr="disabled">
        Save
    </button>
</div>

Targeting Actions

By default, wire:loading will fire when ANY action is called. You can target specific actions using wire:target.

<!--- ./wires/myform.cfm --->
<div>
    <form wire:submit="save">
        <button type="button" wire:click="reset">Reset</button>
        <button type="submit">Save</button>
        <span wire:loading wire:target="save">
            Saving...
        </span>
    </form>
</div>

The saving loading indicator is displayed when the save button is pressed and not when the reset button is pressed.

You can provide multiple targets to wire:target.

// ./wires/MyForm.cfc
component extends="cbwire.models.Component" {
    function save() {
        sleep( 2000 ); // pretend we're saving to the database
    }
    function delete() {
        sleep( 8000 ); // pretend deleting is stupid slow
    }
}

<!--- ./wires/myform.cfm --->
<div>
    <form wire:submit="save">
        <button type="button" wire:click="delete">Delete</button>
        <button type="submit">Save</button>
        <span wire:loading wire:target="save,delete">
            Updating...
        </span>
    </form>
</div>

Targeting Parameters

You can specify parameters to match against when using wire:target="action(param)".

<!--- ./wires/posts.cfm --->
<div>
    <cfloop array="#posts#" index="post">
        <div wire:key="post-#post.id#">
            <h2>#post.title#</h2>
            <button wire:click="remove( #post.id# )">Remove</button>
            <div wire:loading wire:target="remove( #post.id# )">
                Removing...
            </div>
        </div>
    </cfloop>
</div>

Above, our loading indicator is only displayed for the post that is being removed.

Multiple action parameters are currently not supported. This will not work.

wire:target="remove(1),add(1)"

Targeting Property Updates

You can use wire:loading with wire:model.live to display elements during data property updates.

<!--- ./wires/signup.cfm --->
<form wire:submit="save">
    <input type="text" wire:model.live="username">
    <div wire:loading wire:target="username">
        Checking username availability...
    </div>
</form>

Excluding Targets

You can exclude targets using wire:target.except.

<!--- ./wires/myform.cfm --->
<div>
    <form wire:submit="save">
        <button type="button" wire:click="delete">Delete</button>
        <button type="submit">Save</button>
        <span wire:loading wire:target="save">
            Updating...
        </span>
        <span wire:loading wire:target.except="save">
            Deleting...
        </span>
    </form>

</div>

Customizing Display Values

By default, CBWIRE uses display: none to hide elements and display: inline-block to show elements.

When toggling elements with a display value other than inline-block, you can use wire:loading.[value].

Below are the available display values:

<div wire:loading.inline-flex>...</div>
<div wire:loading.inline>...</div>
<div wire:loading.block>...</div>
<div wire:loading.table>...</div>
<div wire:loading.flex>...</div>
<div wire:loading.grid>...</div>

Delaying Loading Indicators

Sometimes, loading indicators are so fast that they only display on the screen briefly before being removed. This can be jarring and distracting to users.

You can delay showing an indicator using wire:loading.delay.

<div wire:loading.delay>...</div>

This will prevent the indicator from showing unless the server request takes 200ms or more.

There are built-in interval aliases you can use as well.

<div wire:loading.delay.shortest>...</div> <!-- 50ms -->
<div wire:loading.delay.shorter>...</div>  <!-- 100ms -->
<div wire:loading.delay.short>...</div>    <!-- 150ms -->
<div wire:loading.delay>...</div>          <!-- 200ms -->
<div wire:loading.delay.long>...</div>     <!-- 300ms -->
<div wire:loading.delay.longer>...</div>   <!-- 500ms -->
<div wire:loading.delay.longest>...</div>  <!-- 1000ms -->