I have a form containing email and password fields, both are required and I have this button

... -> input 
<button type="submit" 
   x-data="{ isClicked: false }" 
    @click="isClicked = true;"
    x-bind:disabled="isClicked">
    <span x-show="isClicked">
        loading ...
    </span>
    <span x-show="!isClicked" class="w-full text">
        Submit
    </span>
</button>
</form>

When I click on the button I get the loading event that is required fields

How can I make the button loading after fill of both input