Backup: fix backup pricing placeholder (#40157)

* Fix backup pricing card loading placeholder

* Changelog

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/11825621230

Upstream-Ref: Automattic/jetpack@3eeff5b

CHANGELOG.md

@@ -9,6 +9,9 @@ This is an alpha version! The changes listed here are not final.
 ### Added
 - Adds tooltips for each ThreatFixerButton state
 
+### Fixed
+- Fixes the loading placeholder that didn't disappear when the price loads.
+
 ## [0.59.0] - 2024-11-11
 ### Added
 - Add ThreatsDataViews component [#39754]

components/pricing-card/index.tsx

@@ -55,7 +55,8 @@ const PricingCard: React.FC< PricingCardProps > = ( {
 			) }
 			<h1 className="jp-components__pricing-card__title">{ props.title }</h1>
 			<div className="jp-components__pricing-card__pricing">
-				{ props.priceBefore !== props.priceAfter && props.priceAfter > 0 ? (
+				{ props.priceAfter === 0 && <LoadingPlaceholder width="100%" height={ 48 } /> }
+				{ props.priceBefore !== props.priceAfter && props.priceAfter > 0 && (
 					<div className="jp-components__pricing-card__price-before">
 						<span className="jp-components__pricing-card__currency">
 							{ currencyObjectBefore.symbol }
@@ -71,8 +72,6 @@ const PricingCard: React.FC< PricingCardProps > = ( {
 						) }
 						<div className="jp-components__pricing-card__price-strikethrough"></div>
 					</div>
-				) : (
-					<LoadingPlaceholder width="100%" height={ 48 } />
 				) }
 				{ props.priceAfter > 0 && (
 					<>