title: Livewire loading state from javascript (async)
body: <p>I have a form that sends a request to Stripe, in order for my users to add a payment method:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form id=&quot;card-form&quot;&gt;
     &lt;label&gt;Card details&lt;/label&gt;
     &lt;div id=&quot;card-element&quot;&gt;&lt;/div&gt;
  
     &lt;button wire:target=&quot;addPaymentMethod&quot; wire:loading.class=&quot;hidden&quot; class=&quot;button round&quot; id=&quot;card-button&quot;&gt;Add payment card&lt;/button&gt;
     &lt;!-- Loading spinner --&gt;
     &lt;svg wire:target=&quot;addPaymentMethod&quot; wire:loading class=&quot;inline-block animate-spin h-5 w-5 text-white&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot;&gt;
        &lt;circle class=&quot;opacity-25&quot; cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;10&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;4&quot;&gt;&lt;/circle&gt;
        &lt;path class=&quot;opacity-75&quot; fill=&quot;currentColor&quot; d=&quot;M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z&quot;&gt;&lt;/path&gt;
     &lt;/svg&gt;
  &lt;/form&gt;
  </code></pre>
  <p>The (stripped down) JavaScript looks like below:</p>
  <pre class="lang-js prettyprint-override"><code>const stripe = Stripe('stripe-public-key');
  const elements = stripe.elements();
  
  const form = document.getElementById('card-form')
  const cardButton = document.getElementById('card-button');
  const cardElement = elements.create('card');
  cardElement.mount('#card-element');
                  
  form.addEventListener('submit', async (e) =&gt; {
      e.preventDefault();
      cardButton.disabled = true;
  
      const {
          setupIntent,
          error
      } = await stripe.confirmCardSetup(
          clientSecret, {
              payment_method: {
                  card: cardNumber,
                  billing_details: {
                      name: 'Oliver'
                  }
              }
          }
      );
  
      if (error) {
          // Display error.message to the user...
          cardButton.disabled = false
          console.log(error.message)
      } else {
          // The card has been verified successfully...
          @this.addPaymentMethod(setupIntent.payment_method)
      }
  
  });
  </code></pre>
  <p>If the response in the async method above is successful, it will trigger the below method in the Livewire component:</p>
  <pre class="lang-php prettyprint-override"><code>public function addPaymentMethod($paymentMethod)
  {
     //Create the payment method in Stripe...
     auth()-&gt;user()-&gt;addPaymentMethod($paymentMethod);
  
     //Other validation etc...
  
  }
  </code></pre>
  <p>The output of all of this is captured in the below gif. As you can see here, the user enters the credit card details and click on the &quot;Add payment card&quot; and is redirected to another page.</p>
  <p>The problem is, that the loading state starts for a while, but disappears before the actual request/redirect is done.</p>
  <p>How can I show the loading spinner until the actual request to Stripe is completed?</p>
  <p><a href="https://i.stack.imgur.com/dpL6T.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dpL6T.gif" alt="enter image description here" /></a></p>