title: react Suspense (or equivalent) while Stripe loads iframe
body: <p>I have an issue where Stripe's React <code>PaymentElement</code> loads <em>very slowly</em> for most of my users (I can't replicate this behavior, but PageSpeed hates it, and AWS CloudWatch RUM is reporting terrible user page load and time-to-interactive numbers).</p>
  <p>I thought I would resolve it by lazy loading the Stripe <code>PaymentElement</code>. What I have now is:</p>
  <pre><code>// Lazy-load PaymentElement even though not default export
  const PaymentElement = React.lazy(() =&gt;
    import('@stripe/react-stripe-js').then(module =&gt; {
      return { default: module.PaymentElement };
    })
  
  const CheckoutForm = () =&gt; {
   // ...
   return (
      &lt;form onSubmit={handleSubmit}&gt;
          &lt;Suspense fallback={&lt;StripePlaceholder /&gt;}&gt;
            &lt;PaymentElement /&gt;
          &lt;/Suspense&gt;
      &lt;/form&gt;
    );
  };
  </code></pre>
  <p>The problem I'm having is my <code>&lt;StripePlaceholder /&gt;</code> fallback renders for a bit, but then disappears, and even on a fast connection on a laptop, there's still a substantial visual delay between the time it goes away, which I guess means the <code>&lt;PaymentElement /&gt;</code> has &quot;rendered&quot;, and the time the form actually appears — which delay I believe is the difference between the component rendering and the iframe loading.</p>
  <p>Is there some way for me to get the placeholder to stay in place while the iframe is loading? I'm not wed to the lazy/Suspense method — I just want some placeholder in place for the apparent 5-10 seconds it takes for some of my users to actually load the form.</p>