SnipForm - Loading/Submit State

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 to the form. This is useful for displaying a loading spinner or other loading content.

On form submit

When the form is submitted, the loading AND submit state will be applied to the form.

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

Basic Usage

Like the Error state, the loading/submit directives are invoked when the form is loading and being submitted. You can pass 4 options:

• show: This will show the element if the form is submitting
• text: (Submit only) This will inject the text into the element if the form is submitting
• class: This will add a class to the element if the form is submitting
• style: This will add the styles to the element if the form is submitting

Loading State

format loading:{option}="VALUE"

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

/>

Full example (animated spinner using tailwindcss):

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

Submit State

format submit:{option}="VALUE"

<div 
    
submit:show
submit:text="Show this text when the form is being submitted (but not on the 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 the above example:

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