From 6d0de5ad965a673a444afcd026f19e2b01e3023d Mon Sep 17 00:00:00 2001
From: valterlorran <valterlorran@hotmail.com>
Date: Fri, 23 Dec 2022 09:52:42 -0300
Subject: [PATCH] Add loading state to the banner (#71468)

---
 client/my-sites/theme/main.jsx   | 7 ++++++-
 client/my-sites/theme/style.scss | 5 +++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/my-sites/theme/main.jsx b/client/my-sites/theme/main.jsx
index 0c037c6dba469a..7847373cc30314 100644
--- a/client/my-sites/theme/main.jsx
+++ b/client/my-sites/theme/main.jsx
@@ -771,6 +771,7 @@ class ThemeSheet extends Component {
 			isExternallyManagedTheme,
 			isSiteEligibleForManagedExternalThemes,
 			isMarketplaceThemeSubscribed,
+			isLoading,
 		} = this.props;
 
 		const analyticsPath = `/theme/${ themeId }${ section ? '/' + section : '' }${
@@ -846,6 +847,10 @@ class ThemeSheet extends Component {
 			onClick = launchPricing;
 		}
 
+		const upsellNudgeClasses = classNames( 'theme__page-upsell-banner', {
+			'theme__page-upsell-disabled': isLoading,
+		} );
+
 		if ( hasWpComThemeUpsellBanner ) {
 			const forceDisplay =
 				( isBundledSoftwareSet && ! isSiteBundleEligible ) ||
@@ -854,7 +859,7 @@ class ThemeSheet extends Component {
 			pageUpsellBanner = (
 				<UpsellNudge
 					plan={ PLAN_PREMIUM }
-					className="theme__page-upsell-banner"
+					className={ upsellNudgeClasses }
 					title={ this.getBannerUpsellTitle() }
 					description={ preventWidows( this.getBannerUpsellDescription() ) }
 					event="themes_plan_particular_free_with_plan"
diff --git a/client/my-sites/theme/style.scss b/client/my-sites/theme/style.scss
index 0453f65e81284e..f672e6919aa7e6 100644
--- a/client/my-sites/theme/style.scss
+++ b/client/my-sites/theme/style.scss
@@ -544,6 +544,11 @@
 	}
 }
 
+.banner.theme__page-upsell-disabled {
+	pointer-events: none;
+	opacity: 0.5;
+}
+
 .banner.theme__preview-upsell-banner {
 	@include banner-dark();
 	width: 100%;