How can I fix the 'Add to Cart' button text collision issue?

[JhordanMSUITE]

Hello, When I click the "Add to Cart" button on the product page, the feedback text collides with the CTA text. The feedback text should say "Adding..." when a product is added to cart. Please see image below for clarity. I need help with this issue. 

https://2d26b3.myshopify.com/products/sample-product

PW: reishi

[Spac-es]

Add this code in your theme.liquid:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var addButton = document.querySelector('.cartButton.is-outline.is-currentcolor');

    addButton.addEventListener('click', function() {
      var ctaText = document.querySelector('.cta');

      ctaText.style.display = 'none';

      setTimeout(function() {
        ctaText.style.display = 'inline';
      }, 1000); // Change the timing as needed to match the duration of the animation, just when 'Adding...' is hidden
    });
  });
</script>

[JhordanMSUITE]

@Spac-es That worked, but now the CTA button shrinks in size when clicked. It shrinks to about half it's size and releases back to it's normal state after adding to cart.

[Spac-es · Accepted solution]

I understand the problem. Instead of setting the display to none we will make the opacity equal to 0, this way the size of the text will remain intact.

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var addButton = document.querySelector('.cartButton.is-outline.is-currentcolor');

    addButton.addEventListener('click', function() {
      var ctaText = document.querySelector('.cta');

      ctaText.style.opacity = '0';

      setTimeout(function() {
        ctaText.style.opacity = '1';
      }, 1000); // Change the timing as needed to match the duration of the animation, just when 'Adding...' is hidden
    });
  });
</script>

[JhordanMSUITE]

@Spac-es you're awesome, thank you for your time and effort!