From c2dd31e1051f8bf5c984d53489ac4105989d54d6 Mon Sep 17 00:00:00 2001
From: Initsogar <Initsogar@users.noreply.github.com>
Date: Wed, 13 Nov 2024 21:08:40 +0000
Subject: [PATCH] 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@3eeff5b7ea42234b79e617730dc07f075c256764
---
 CHANGELOG.md                      | 3 +++
 components/pricing-card/index.tsx | 5 ++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5a45e01..8229dcf 100644
--- a/CHANGELOG.md
+++ b/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]
diff --git a/components/pricing-card/index.tsx b/components/pricing-card/index.tsx
index b7a6476..fabfaaa 100644
--- a/components/pricing-card/index.tsx
+++ b/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 && (
 					<>