TailwindCSS changes button loading indicator position

[garrettmassey1]

Nova uses an animates SVG on the "create" or "update" buttons to indicate when a form is being submitted or processed. The position of the SVG is changed by the styles included in this package. Instead of the SVG being centered on the button, it is now centered absolutely on the page's content. The underlying HTML of the button when the form is being submitted is:

<button type="submit" class="border text-left appearance-none cursor-pointer rounded text-sm font-bold focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 disabled:cursor-not-allowed inline-flex items-center justify-center shadow h-9 px-3 bg-primary-500 border-primary-500 hover:[&amp;:not(:disabled)]:bg-primary-400 hover:[&amp;:not(:disabled)]:border-primary-400 text-white dark:text-gray-900" dusk="create-button" disabled="">
    <span class="flex items-center gap-1 invisible">
        Create Ticket
    </span>
    <span class="absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <svg class="mx-auto block" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" style="width: 32px;">
            <circle cx="15" cy="15" r="15">
                <animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate>
                <animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate>
            </circle>
            <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                <animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite"></animate>
                <animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite"></animate>
            </circle>
            <circle cx="105" cy="15" r="15">
                <animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate>
                <animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate>
            </circle>
        </svg>
    </span>
</button>

which should create a button that looks like this:

But instead, the class absolute and the style="top: 50%; left: 50%; transform: translate(-50%, -50%);" and the inclusion of this package's css moves the svg indicator to the center of the screen (shown highlighted through the inspector below)

This leaves the user with no visual indicator that the form is processing or working.

I'm trying to work on a css fix for it now.

[garrettmassey1]

If you add your own style to Nova through the NovaServiceProvider, you can add the following class definition to fix the issue for the create and update buttons:

NovaServiceProvider.php

public function boot() {
    Nova::style('admin', asset('/assets/css/admin.css'));
}

admin.css

button[type="submit"] > span:nth-child(2).absolute {
    display: flex !important;
    position: unset !important;
    justify-content: center !important;
    align-items: center !important;
    top: unset !important;
    left: unset !important;
    right: unset !important;
    bottom: unset !important;
    transform: unset !important;
}

This should work as a temporary fix.