In this episode, we dive into handling loading states in forms with Livewire. You’ll learn how to give users feedback while their form is being submitted—super helpful if there's a lot of data or a slow connection. We add an artificial delay to our form submission so you can really see loading in action.
First, we set up a simple "loading" message that appears when the form is processing. You'll see how to use wire:loading
in the template to make the message display only when the form is busy. We then tackle that annoying flicker some loading indicators get—by adding a delay modifier so the message doesn’t pop up unnecessarily for super quick actions.
Next, we check out how Livewire automatically disables form submit buttons for you during a request, so users can’t spam the button and create duplicate records. You'll see how to style the button with Tailwind (or just CSS) to make the loading state visually obvious.
Not all buttons are submit buttons, though—so you'll also learn how to set up custom loading and disabled states for other types of buttons using wire:loading and attribute modifiers!
Finally, we cover some tips like swapping button text (e.g. switching from "Submit" to "Loading...") while the request is processing. By the end, you’ll have a toolkit of UX tricks to make sure users always know what’s happening with your forms.
Remember, there’s a lot more you can do with loading states, but these core patterns are what you’ll use most of the time!