Integrate a Loading Spinner into Livewire

I'm working on the last few videos of a series on Single Database Multi-Tenancy for Laracasts, and I didn't have time to include a piece on adding a loading spinner to your Livewire components.

I found some beautiful, CSS only spinners on at the following website: https://github.danielcardoso.net/load-awesome/animations.html

I picked one I liked and then implemented with the super simple instructions in the Livewire docs.

Basically you just add wire:loading to the element you want to show only when the loading is taking place. Then you can also add wire:target="submit" and target whichever property or method you need.

For example, I only want the loading spinner next to the submit button to show when I click that button.

It's super simple (thanks Caleb) so I wanted to quickly pull an unpolished video together that shows how to do this. If you've watched my videos on Laracasts, you'll notice this "live session" is very different from the polished versions.