Add Skeleton loading component to the PMME element on the PDP (#9166)

Co-authored-by: Brett Shumaker <[email protected]>

changelog/9126-add-pmme-pdp-skeleton-loader

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Adds skeleton loading element for BNPL payment messaging element on product details page.

client/product-details/bnpl-site-messaging/index.js

@@ -140,19 +140,26 @@ export const initializeBnplSiteMessaging = async () => {
 		}
 
 		// Set the `--wc-bnpl-margin-bottom` CSS variable to the computed bottom margin of the price element.
-		document
-			.getElementById( 'payment-method-message' )
-			.style.setProperty( '--wc-bnpl-margin-bottom', bottomMargin );
+		const paymentMessageContainer = document.getElementById(
+			'payment-method-message'
+		);
+		paymentMessageContainer.style.setProperty(
+			'--wc-bnpl-margin-bottom',
+			bottomMargin
+		);
 
-		// When the payment message element is ready, add the `ready` class so the necessary CSS rules are applied.
-		paymentMessageElement.on( 'ready', () => {
-			document
-				.getElementById( 'payment-method-message' )
-				.classList.add( 'ready' );
+		let paymentMessageLoading;
+		if ( ! isCart ) {
+			paymentMessageLoading = document.createElement( 'div' );
+			paymentMessageLoading.classList.add( 'pmme-loading' );
+			paymentMessageContainer.prepend( paymentMessageLoading );
+		}
 
+		paymentMessageElement.on( 'ready', () => {
 			// On the cart page, get the height of the PMME after it's rendered and store it in a CSS variable. This helps
 			// prevent layout shifts when the PMME is loaded asynchronously upon cart total update.
 			if ( isCart ) {
+				paymentMessageContainer.classList.add( 'ready' );
 				// An element that won't be removed with the cart total update.
 				const cartCollaterals = document.querySelector(
 					'.cart-collaterals'
@@ -200,6 +207,8 @@ export const initializeBnplSiteMessaging = async () => {
 
 					pmme.style.setProperty( '--wc-bnpl-margin-bottom', '-4px' );
 				}, 2000 );
+			} else {
+				paymentMessageLoading.remove();
 			}
 		} );
 	}

client/product-details/bnpl-site-messaging/style.scss

@@ -3,16 +3,23 @@
 	--wc-bnpl-margin-bottom: 0;
 }
 
-// Only apply the adjusted margins on the bnpl element when it immediately follows .price or .wp-block-woocommerce-product-price and the `ready` class has been added.
-.price,
-.wp-block-woocommerce-product-price {
-	&:has( + #payment-method-message.ready ) {
-		margin-bottom: 0;
-	}
+.pmme-loading {
+	animation: pmme-loading 1s linear infinite alternate;
+	background: #afafaf;
+}
 
-	+ #payment-method-message.ready {
-		margin-top: 0.5rem;
-		margin-bottom: var( --wc-bnpl-margin-bottom );
+.summary,
+.wp-block-woocommerce-product-price + {
+	#payment-method-message {
+		height: 4em;
+		position: relative;
+
+		.pmme-loading {
+			position: absolute;
+			width: 100%;
+			max-width: 20em;
+			height: 100%;
+		}
 	}
 }
 
@@ -35,8 +42,6 @@
 	}
 
 	.pmme-loading {
-		animation: pmme-loading 1s linear infinite alternate;
-		background: #afafaf;
 		height: var( --wc-bnpl-container-height );
 		margin: -4px 1em var( --wc-bnpl-loader-margin ) 1em;
 	}