Add buttons loading spinner

modules/ppcp-button/resources/js/button.js

@@ -14,7 +14,9 @@ import {
     ORDER_BUTTON_SELECTOR,
     PaymentMethods
 } from "./modules/Helper/CheckoutMethodState";
-import {setVisible} from "./modules/Helper/Hiding";
+import {hide, setVisible} from "./modules/Helper/Hiding";
+
+const buttonsSpinner = new Spinner('.place-order');
 
 const bootstrap = () => {
     const errorHandler = new ErrorHandler(PayPalCommerceGateway.labels.error.generic);
@@ -23,7 +25,10 @@ const bootstrap = () => {
     const onSmartButtonClick = data => {
         window.ppcpFundingSource = data.fundingSource;
     };
-    const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway, onSmartButtonClick);
+    const onSmartButtonsInit = () => {
+        buttonsSpinner.unblock();
+    };
+    const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway, onSmartButtonClick, onSmartButtonsInit);
     const messageRenderer = new MessageRenderer(PayPalCommerceGateway.messages);
     const context = PayPalCommerceGateway.context;
     if (context === 'mini-cart' || context === 'product') {
@@ -102,7 +107,18 @@ document.addEventListener(
         // Normally it is hidden later after the script load.
         const hideOrderButtonIfPpcpGateway = () => {
             const currentPaymentMethod = getCurrentPaymentMethod();
-            setVisible(ORDER_BUTTON_SELECTOR, currentPaymentMethod !== PaymentMethods.PAYPAL, true);
+            const isPaypal = currentPaymentMethod === PaymentMethods.PAYPAL;
+
+            setVisible(ORDER_BUTTON_SELECTOR, !isPaypal, true);
+
+            if (PayPalCommerceGateway.context === 'checkout') {
+                if (isPaypal) {
+                    // stopped after the first rendering of the buttons, in onInit
+                    buttonsSpinner.block();
+                } else {
+                    buttonsSpinner.unblock();
+                }
+            }
         }
 
         let bootstrapped = false;

modules/ppcp-button/resources/js/modules/Helper/Spinner.js

@@ -1,7 +1,7 @@
 class Spinner {
 
-    constructor() {
-        this.target = 'form.woocommerce-checkout';
+    constructor(target = 'form.woocommerce-checkout') {
+        this.target = target;
     }
 
     setTarget(target) {

modules/ppcp-button/resources/js/modules/Renderer/Renderer.js

@@ -1,8 +1,9 @@
 class Renderer {
-    constructor(creditCardRenderer, defaultConfig, onSmartButtonClick) {
+    constructor(creditCardRenderer, defaultConfig, onSmartButtonClick, onSmartButtonsInit) {
         this.defaultConfig = defaultConfig;
         this.creditCardRenderer = creditCardRenderer;
         this.onSmartButtonClick = onSmartButtonClick;
+        this.onSmartButtonsInit = onSmartButtonsInit;
     }
 
     render(wrapper, hostedFieldsWrapper, contextConfig) {
@@ -21,6 +22,7 @@ class Renderer {
             style,
             ...contextConfig,
             onClick: this.onSmartButtonClick,
+            onInit: this.onSmartButtonsInit,
         }).render(wrapper);
     }