Ensure ‘Proceed to Checkout’ Button Does Not Collapse Through WooPay …

…Direct Checkout Flow (#9172)

Co-authored-by: Kristófer Reykjalín <13835680+reykjalin@users.noreply.github.com>

changelog/fix-9165-prevent-proceed-to-checkout-from-collapsing-in-dc

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Ensure the 'Proceed to Checkout' button does not collapse when adding a loading spinner, in the Direct Checkout flow.

client/checkout/woopay/direct-checkout/woopay-direct-checkout.js

@@ -302,20 +302,27 @@ class WooPayDirectCheckout {
 		 * @param {Element} element The element to add the loading spinner to.
 		 */
 		const addLoadingSpinner = ( element ) => {
+			const elementCss = window.getComputedStyle( element, null );
+			const originalColor = elementCss.getPropertyValue( 'color' );
+
 			// Create a spinner to show when the user clicks the button.
 			const spinner = document.createElement( 'span' );
 			spinner.classList.add( 'wc-block-components-spinner' );
-			spinner.style.position = 'relative';
+			spinner.style.position = 'absolute';
+			spinner.style.top = '0';
+			spinner.style.left = '0';
+			spinner.style.width = '100%';
+			spinner.style.height = '100%';
+			spinner.style.color = originalColor;
 			spinner.style.fontSize = 'unset';
 			spinner.style.display = 'inline';
 			spinner.style.lineHeight = '0';
 			spinner.style.margin = '0';
 			spinner.style.border = '0';
 			spinner.style.padding = '0';
-			// Remove the existing content of the button.
-			// Set innerHTML to ' ' to keep the button's height.
-			element.innerHTML = ' ';
-			element.classList.remove( 'wc-forward' );
+			// Hide the existing content of the button.
+			element.style.color = 'rgba( 0, 0, 0, 0 )';
+			element.style.position = 'relative';
 			// Add the spinner to the button.
 			element.appendChild( spinner );
 		};