diff --git a/modules/ppcp-paylater-block/resources/js/edit.js b/modules/ppcp-paylater-block/resources/js/edit.js
index 0b000474a..b98ee8224 100644
--- a/modules/ppcp-paylater-block/resources/js/edit.js
+++ b/modules/ppcp-paylater-block/resources/js/edit.js
@@ -1,12 +1,15 @@
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { PanelBody, SelectControl } from '@wordpress/components';
+import { PanelBody, SelectControl, Spinner } from '@wordpress/components';
 import { PayPalScriptProvider, PayPalMessages } from "@paypal/react-paypal-js";
 
 export default function Edit( { attributes, setAttributes } ) {
     const { layout, logo, position, color, flexColor, flexRatio } = attributes;
     const isFlex = layout === 'flex';
 
+    const [loaded, setLoaded] = useState(false);
+
     const previewStyle = {
         layout,
         logo: {
@@ -102,10 +105,12 @@ export default function Edit( { attributes, setAttributes } ) {
                         <PayPalMessages
                             style={previewStyle}
                             forceReRender={[previewStyle]}
+                            onRender={() => setLoaded(true)}
                         />
                     </PayPalScriptProvider>
                 </div>
                 <div className={'ppcp-overlay-child ppcp-unclicable-overlay'}> {/* make the message not clickable */}
+                    {!loaded && (<Spinner/>)}
                 </div>
             </div>
 		</>