Add loading state to the banner (#71468)

Automattic · Dec 23, 2022 · 6d0de5a · 6d0de5a
1 parent af98552
commit 6d0de5a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git 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
@@ -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%;