From da3c1cdd0259fd6220dc0e5db529f055eb0ee8c4 Mon Sep 17 00:00:00 2001
From: Anthony Grullon <agrullon95@gmail.com>
Date: Fri, 21 Feb 2025 09:55:03 -0500
Subject: [PATCH 1/3] Refactor loading component in processing screen and
 update styles

---
 client/signup/reskinned-processing-screen/index.jsx  | 12 +++++++-----
 client/signup/reskinned-processing-screen/style.scss |  4 ++++
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/client/signup/reskinned-processing-screen/index.jsx b/client/signup/reskinned-processing-screen/index.jsx
index cc9c8ba2f9e741..8285da0e8eeef5 100644
--- a/client/signup/reskinned-processing-screen/index.jsx
+++ b/client/signup/reskinned-processing-screen/index.jsx
@@ -4,7 +4,7 @@ import { useI18n } from '@wordpress/react-i18n';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { useRef, useState, useEffect } from 'react';
-import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
+import Loading from 'calypso/components/loading';
 import { useInterval } from 'calypso/lib/interval/use-interval';
 import './style.scss';
 
@@ -120,12 +120,14 @@ export default function ReskinnedProcessingScreen( props ) {
 				'is-force-centered': shouldShowNewSpinner && totalSteps === 0,
 			} ) }
 		>
-			<h1 className="reskinned-processing-screen__progress-step">
-				{ steps.current[ currentStep ]?.title }
-			</h1>
-			{ shouldShowNewSpinner && <LoadingEllipsis /> }
+			{ shouldShowNewSpinner && (
+				<Loading title={ steps.current[ currentStep ]?.title } progress={ progress } />
+			) }
 			{ ! shouldShowNewSpinner && (
 				<>
+					<h1 className="reskinned-processing-screen__progress-step">
+						{ steps.current[ currentStep ]?.title }
+					</h1>
 					<div
 						className="reskinned-processing-screen__progress-bar"
 						style={ {
diff --git a/client/signup/reskinned-processing-screen/style.scss b/client/signup/reskinned-processing-screen/style.scss
index 3299718962c5e7..184fde66634cf2 100644
--- a/client/signup/reskinned-processing-screen/style.scss
+++ b/client/signup/reskinned-processing-screen/style.scss
@@ -57,4 +57,8 @@ $progress-duration: 800ms;
 		vertical-align: middle;
 		margin: 0;
 	}
+
+	.wpcom__loading {
+		margin: 0;
+	}
 }

From e6438480300353d7df079b7af0812310bce6b7b2 Mon Sep 17 00:00:00 2001
From: Anthony Grullon <agrullon95@gmail.com>
Date: Fri, 21 Feb 2025 11:52:04 -0500
Subject: [PATCH 2/3] fix: restore original class name for progress step header
 in processing screen

---
 client/signup/processing-screen/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/signup/processing-screen/index.tsx b/client/signup/processing-screen/index.tsx
index 68ddcd99ed9ba3..f05f3e94d12c20 100644
--- a/client/signup/processing-screen/index.tsx
+++ b/client/signup/processing-screen/index.tsx
@@ -135,13 +135,12 @@ export default function ProcessingScreen( props: ProcessingScreenProps ) {
 				'is-force-centered': shouldShowNewSpinner && totalSteps === 0,
 			} ) }
 		>
-			<h1 className="processing-screen__progress-step">{ steps.current[ currentStep ]?.title }</h1>
 			{ shouldShowNewSpinner && (
 				<Loading title={ steps.current[ currentStep ]?.title } progress={ progress } />
 			) }
 			{ ! shouldShowNewSpinner && (
 				<>
-					<h1 className="reskinned-processing-screen__progress-step">
+					<h1 className="processing-screen__progress-step">
 						{ steps.current[ currentStep ]?.title }
 					</h1>
 					<div

From 61d2611004f6eb344c78135be5db064325ae8780 Mon Sep 17 00:00:00 2001
From: Anthony Grullon <agrullon95@gmail.com>
Date: Fri, 21 Feb 2025 12:18:23 -0500
Subject: [PATCH 3/3] fix: correct progress percentage calculation in loading
 component

---
 client/signup/processing-screen/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/signup/processing-screen/index.tsx b/client/signup/processing-screen/index.tsx
index f05f3e94d12c20..63384e80d4e919 100644
--- a/client/signup/processing-screen/index.tsx
+++ b/client/signup/processing-screen/index.tsx
@@ -136,7 +136,7 @@ export default function ProcessingScreen( props: ProcessingScreenProps ) {
 			} ) }
 		>
 			{ shouldShowNewSpinner && (
-				<Loading title={ steps.current[ currentStep ]?.title } progress={ progress } />
+				<Loading title={ steps.current[ currentStep ]?.title } progress={ progress * 100 } />
 			) }
 			{ ! shouldShowNewSpinner && (
 				<>