CBWIRE
InstallSource CodeIssuesSupport
v3.x
v3.x
  • Introduction
  • Getting Started
  • Configuration
  • How It Works
  • Release History
    • What's New With 3.2
    • What's New With 3.1
    • What's New With 3.0
    • What's New With 2.2
    • What's New With 2.1
    • What's New With 2.0
  • Examples
    • Contact Form
    • Multi-select Input
    • File Upload
  • Resources
  • The Essentials
    • Components
    • Templates
    • Data Properties
    • Computed Properties
    • Actions
    • Events
    • Lifecycle Methods
    • JavaScript
    • Testing
  • Wire Features
    • Validation
    • File Uploads
    • Query String
    • Redirecting
    • WireBox
  • Template Features
    • Directives
    • Loading States
    • Polling
    • Prefetching
    • Offline State
    • Defer Loading
    • Dirty State
  • Integrations
    • ContentBox CMS
    • SPAs with Turbo
    • AlpineJS
Powered by GitBook
On this page
  • Toggling Elements
  • Toggling Attributes
  • Targeting Specific Actions
  • Delaying
  • Display Property
  • Hiding
  1. Template Features

Loading States

Show your users loading spinners, modals, and more as they wait for requests to complete.

Actions may involve a long-running process (such as completing a cart checkout) and HTML may not re-render instantly. You can help your users during the wait using Loading States. Loading States allow you to show/hide elements, add/remove classes, or toggle HTML attributes until the server responds.

Loading States can make your apps feel much more responsive and user-friendly.

Toggling Elements

Let's look at an action that takes too long.

<cfscript>
    function addTask(){
        sleep( 5000 ); // Optimize this code yo!
    }
</cfscript>

We can annotate our <div> with wire:loading to display Adding Task while the checkout action is running.

<cfoutput>
    <div>
        <button wire:click="addTask">Add Task</button>
    
        <div wire:loading>
            Adding Task...
        </div>
    </div>
</cfoutput>

<cfscript>
    function addTask(){
        sleep( 5000 ); // Optimize this code yo!
    }
</cfscript>

Toggling Attributes

<cfoutput>
    <div>
        <button wire:click="addTask" wire:loading.attr="disabled">
            Add Task
        </button>
    </div>
</cfoutput>

Targeting Specific Actions

You can target a specific action so that the element is only visible if a specific action is loading using wire:target.

<cfoutput>
   <div>
       <button wire:click="addTask">Add Task</button>
    
       <div wire:loading wire:target="addTask">
          Adding task...
       </div>
   </div>
</cfoutput>

Delaying

If you want to avoid flickering because loading is very fast, you can add a .delay modifier, and it will only show up if loading takes longer than 200ms.

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

If you wish, you can customize the delay duration with the following modifiers:

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

Display Property

Loading State elements are set with a CSS property of display: inline-block; by default. You can override this behavior by using various directive modifiers.

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

Hiding

If you want to display an element except during a loading state, you can apply the wire:loading.remove directive.

<cfoutput>
    <div>
        <button wire:click="addTask">Add Task</button>
    
        <div wire:loading.remove>
            Click 'Add Task'
        </div>
    </div>
</cfoutput>
PreviousDirectivesNextPolling

Last updated 1 year ago

After the action completes, the Adding Task... output will disappear.

👋