<div class='button-container'>
  <button name="button" type="button" class="primary-button regular-button  warning-button   " onclick="displayAnimation(this, 'regular-button-loading-animation')" id="regular-button"><span class="primary-button-icon left-button-icon hide"></span>
    <div>Login</div>
    <span class="primary-button-icon right-button-icon hide"></span></button>
</div>
<div class="animation-container  warning-button  " id="regular-button-loading-animation">
  <div class="lds-ellipsis">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<script type='text/javascript'>
  //<![CDATA[
    function displayAnimation(element, loadingId){
        const loading = document.getElementById(loadingId)
        element.style.display = 'none';
        loading.style.display = 'flex';
    }
    document.addEventListener('turbo:submit-end', function(event) {
         const loading = document.getElementById('regular-button-loading-animation')
         const button = document.getElementById('regular-button')
         button.style.display = 'flex';
         loading.style.display = 'none';
    });
  //]]>
</script>