We’ve got a form in our LiveView and I know that if I add the attribute phx-disable-with to my submit button, it will be disabled and the inner text will be changed with the value of the attribute.
However I couldn’t figure out how I can make it work with animations, because if I use the class phx-submit-loading to display my animation then I can’t use phx-disable-with because then phx-disable-with will override the contents of the button. If I don’t use phx-disable-with then my button will not be disabled.
For example, when the submit button is pressed I’d like to display the dot spinner below on the button instead of the “Upload” text.
<div class="h-full flex items-center px-2">
<div class="w-2 h-2 rounded-full animate-dot-spinner bg-white mr-2" style="animation-delay: 0.35s"></div>
<div class="w-2 h-2 rounded-full animate-dot-spinner bg-white mr-2"></div>
<div class="w-2 h-2 rounded-full animate-dot-spinner bg-white" style="animation-delay: 0.35s"></div>
</div>
What I tried is give a class of dot-spinner to the spinner I’ve shared the snippet of above. Then wrap the “Upload” text inside the button with a span and give the class of inner-text.
Then in CSS do 
.phx-submit-loading {
.while-submitting {
display: block;
}
.inner-text {
display: none;
}
.dot-spinner {
display: flex;
}
}
.dot-spinner {
display: none
}
However as I mentioned above if I use this way then the button will not be disabled while the phx-submit event is being handled.
