Forms Loading Inidicator

May 23, 2023
Tony Partridge
Form builder

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:


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">
<svg class="animate-spin h-16 w-16 text-gray-700" xmlns="" 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>

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.


And that should be it!


Do i add the View::make() inside the resource form method?


You include it wihtin fhr form schema, as per the standard View Field