When using larger forms they can start to become a little slow when applying changes and conditions, and whilst smaller forms are better they are not always practical.

In this example we will build a blade view and render it within a form to display a loading indicator covering the entire page until it has finished it's changes.

Create a file in:

/resources/views/forms/loading.blade.php

With the following code:

<div id="wire-loading" class="fixed top-0 bottom-0 right-0 left-0 h-full w-full index-100 bg-white bg-opacity-60 flex items-center content-center justify-center hidden"
wire:loading.class.add="visible display-flex">
    <div>
        <svg class="animate-spin h-16 w-16 text-gray-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
    </div>
</div>

Ensure to run:

npm run dev or npm run build to re-build the css and load in classes you may not already be using.

Next within the form, you will want to include a view component to render the above.

View::make('forms.loading')

And that should be it!