Loading & Submit States

In some cases, you may want to apply a different state to your form when it is loading or being submitted.

Loading vs Submit

On Initial Load

When the form is first loaded, the loading state will be applied. This is useful for displaying a loading spinner or other loading content.

On Form Submit

When the form is submitted, both loading AND submit states will be applied.

In the case where both directives are applied, the submit state will take precedence.

Basic Usage

Like the Error state, loading/submit directives accept 4 options:

show - Show the element
text - (Submit only) Inject text
class - Add a class
style - Add styles

Loading State

Format: loading:{option}="VALUE"

<div
  loading:show
  loading:class="bg-orange-500"
  loading:style="background: gray; color: white"
/>

Full Example (animated spinner with Tailwind)

<form class="relative p-10">
    <div loading:show class="absolute left-0 top-0 w-full h-full bg-white bg-opacity-75 z-10">
        <div class="flex justify-center items-center h-64">
            <div class="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
        </div>
    </div>
    <!-- form fields -->
</form>

Submit State

Format: submit:{option}="VALUE"

<div
  submit:show
  submit:text="Show this text when submitting (not on initial load)"
  submit:class="bg-orange-500"
  submit:style="background: orange; color: white"
/>

Full Example

<div submit:show>
    <h3>One moment</h3>
</div>
<input type="text" name="first_name" submit:class="bg-gray-500">
<button type="submit" submit:text="Saving...">Save</button>

In this example:

The div will be shown when the form is submitting (and only when submitting)
The input will have a class of bg-gray-500 when submitting
The button text will change to Saving... when submitting