title: Prevent form submit until recapcha v3 finished loading
body: <p>I am using Recapcha V3 to insert a hidden input in the form with the token. When the form is submitted I check the token in the backend and act accordingly .</p>
  
  <pre><code>&lt;script src='https://www.google.com/recaptcha/api.js?render={{config("recaptcha.key")}}'&gt;&lt;/script&gt;
  &lt;script&gt;
  grecaptcha.ready(function () {
      grecaptcha.execute('{{config("recaptcha.key")}}', {action:  '{{$action}}'}).then(function (token) {
          $('&lt;input /&gt;').attr('type', 'hidden')
                  .attr('name', 'recaptcha')
                  .attr('value', token)
                  .appendTo('form');
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem is when a user submits the form too fast and the input isn't yet <code>appendTo('form')</code>, the backend receives no token and returns the user back to the form page with an validation error (I prevent data from being sent if the token is not present). </p>
  
  <p><strong>I can't figure out how to prevent the form from submitting in the first place, until the token has loaded.</strong></p>
  
  <p>So something like:</p>
  
  <p>If the users clicks submit and the token is not yet loaded do some loading animation and wait for the token and then submit, if the token is present when the user clicks submit just allow the form to be submitted.</p>