Stepper: Unify loading states

client/landing/stepper/declarative-flow/internals/components/stepper-loader/index.tsx

@@ -1,10 +1,46 @@
-import clsx from 'clsx';
-import WordPressLogo from 'calypso/components/wordpress-logo';
+import { isWooExpressFlow, isTransferringHostedSiteCreationFlow } from '@automattic/onboarding';
+import { ProgressBar } from '@wordpress/components';
+import { LoadingBar } from 'calypso/components/loading-bar';
 import './style.scss';
 
-const StepperLoader = () => {
-	/* eslint-disable wpcalypso/jsx-classname-namespace */
-	return <WordPressLogo size={ 72 } className={ clsx( 'wpcom-site__logo', 'stepper-loader' ) } />;
+interface StepperLoaderProps {
+	title?: string;
+	subtitle?: React.ReactNode;
+	progress?: number;
+	flow?: string;
+}
+
+const StepperLoader: React.FC< StepperLoaderProps > = ( {
+	title,
+	subtitle,
+	progress = -1,
+	flow = null,
+} ) => {
+	const renderProgressComponent = () => {
+		if ( isWooExpressFlow( flow ) || isTransferringHostedSiteCreationFlow( flow ) ) {
+			return (
+				<LoadingBar
+					progress={ progress >= 0 ? progress : -1 }
+					className="processing-step__content woocommerce-install__content"
+				/>
+			);
+		}
+
+		return (
+			<ProgressBar
+				value={ progress >= 0 ? progress * 100 : undefined }
+				className="stepper-loader__progress-bar processing-step__progress-bar"
+			/>
+		);
+	};
+
+	return (
+		<div className="stepper-loader">
+			<h1 className="stepper-loader__title processing-step__progress-step">{ title }</h1>
+			{ renderProgressComponent() }
+			{ subtitle && <p className="stepper-loader__subtitle">{ subtitle }</p> }
+		</div>
+	);
 };
 
 export default StepperLoader;

client/landing/stepper/declarative-flow/internals/components/stepper-loader/style.scss

@@ -1,3 +1,40 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+@import "@automattic/onboarding/styles/mixins";
+
 .stepper-loader {
-	animation: loading-fade 1.6s ease-in-out infinite;
+	--wp-components-color-foreground: #3858e9;
+	padding: 1em;
+	max-width: 540px;
+	text-align: center;
+	margin: 32vh auto 0;
+
+	.stepper-loader__title {
+		@include onboarding-font-recoleta;
+		font-weight: 400;
+		height: 40px;
+		letter-spacing: -0.4px;
+		line-height: 40px;
+		margin: 0;
+		text-align: center;
+		vertical-align: middle;
+
+		font-size: $font-title-medium;
+
+		@include break-medium {
+			font-size: $font-title-large;
+		}
+	}
+
+	.stepper-loader__progress-bar {
+		margin: 46px auto 0 auto;
+	}
+
+	.stepper-loader__subtitle {
+		font-size: 1rem;
+		line-height: 21px;
+		letter-spacing: -0.02em;
+		color: var(--studio-gray-50);
+		margin-top: 24px;
+	}
 }

client/landing/stepper/declarative-flow/internals/global.scss

@@ -108,7 +108,8 @@ button {
 .hundred-year-domain,
 .link-in-bio-tld,
 .entrepreneur,
-.generate-content {
+.generate-content,
+.processing {
 	box-sizing: border-box;
 
 	&.step-route {
@@ -226,6 +227,10 @@ button {
 
 }
 
+.step-route.onboarding {
+	margin: 0 auto;
+}
+
 .import-focused .step-container.site-picker,
 .import-hosted-site .step-container.site-picker {
 	max-width: 1280px;
@@ -401,17 +406,6 @@ button {
 	}
 }
 
-.wooexpress,
-.copy-site,
-.ecommerce {
-	.step-container.processing-step {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		margin-top: 25vh;
-	}
-}
-
 .assign-trial-plan,
 .processing {
 	&.wooexpress,
@@ -449,6 +443,12 @@ button {
 }
 
 .wooexpress {
+	.step-container.processing-step {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-top: 9vh;
+	}
 	.step-container .step-container__content h1 {
 		font-family: proxima-nova, sans-serif;
 		font-weight: 600;
@@ -470,7 +470,7 @@ button {
 		max-width: 640px;
 		box-sizing: border-box;
 	}
-	p.processing-step__subtitle {
+	p.stepper-loader__subtitle {
 		font-family: "SF Pro Text", $sans;
 		font-weight: 400;
 		letter-spacing: initial;

client/landing/stepper/declarative-flow/internals/index.tsx

@@ -6,6 +6,7 @@ import Modal from 'react-modal';
 import { generatePath, useParams } from 'react-router';
 import { Route, Routes } from 'react-router-dom';
 import DocumentHead from 'calypso/components/data/document-head';
+import WordPressLogo from 'calypso/components/wordpress-logo';
 import { STEPPER_INTERNAL_STORE } from 'calypso/landing/stepper/stores';
 import AsyncCheckoutModal from 'calypso/my-sites/checkout/modal/async';
 import { useSelector } from 'calypso/state';
@@ -156,7 +157,10 @@ export const FlowRenderer: React.FC< { flow: Flow; steps: readonly StepperStep[]
 	const renderStep = ( step: StepperStep ) => {
 		switch ( assertCondition.state ) {
 			case AssertConditionState.CHECKING:
-				return <StepperLoader />;
+				if ( isWooExpressFlow( flow.name ) ) {
+					return <WordPressLogo size={ 72 } className="wpcom-site__logo stepper-loader" />;
+				}
+				return <StepperLoader flow={ flow.name } />;
 			case AssertConditionState.FAILURE:
 				return null;
 		}

client/landing/stepper/declarative-flow/internals/steps-repository/assign-trial-plan/index.tsx

@@ -1,10 +1,9 @@
-import { isWooExpressFlow, StepContainer } from '@automattic/onboarding';
+import { StepContainer } from '@automattic/onboarding';
 import { useSelect } from '@wordpress/data';
 import { useI18n } from '@wordpress/react-i18n';
 import { useEffect } from 'react';
 import DocumentHead from 'calypso/components/data/document-head';
-import { LoadingBar } from 'calypso/components/loading-bar';
-import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
+import { StepperLoader } from 'calypso/landing/stepper/declarative-flow/internals/components';
 import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import wpcom from 'calypso/lib/wp';
@@ -76,24 +75,14 @@ const AssignTrialPlanStep: Step = function AssignTrialPlanStep( { navigation, da
 				shouldHideNavButtons
 				hideFormattedHeader
 				stepName="assign-trial-step"
-				isHorizontalLayout
 				recordTracksEvent={ recordTracksEvent }
 				stepContent={
-					<>
-						<div className="assign-trial-step">
-							<h1 className="assign-trial-step__progress-step">{ getCurrentMessage() }</h1>
-							{ progress >= 0 || isWooExpressFlow( flow ) ? (
-								<LoadingBar progress={ progress } />
-							) : (
-								<LoadingEllipsis />
-							) }
-							{ isWooExpressFlow( flow ) ? (
-								<p className="processing-step__subtitle">{ getSubTitle() }</p>
-							) : (
-								<></>
-							) }
-						</div>
-					</>
+					<StepperLoader
+						title={ getCurrentMessage() }
+						subtitle={ getSubTitle() }
+						progress={ progress }
+						flow={ flow }
+					/>
 				}
 				showFooterWooCommercePowered={ false }
 			/>

client/landing/stepper/declarative-flow/internals/steps-repository/assign-trial-plan/styles.scss

@@ -12,14 +12,12 @@
 		padding: 1em;
 		max-width: 540px;
 		text-align: center;
-		margin: 16vh auto 0;
 	}
 
 	> .assign-trial-step {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		margin-top: 25vh;
 	}
 
 	.step-container {

client/landing/stepper/declarative-flow/internals/steps-repository/create-site/index.tsx

@@ -30,11 +30,10 @@ import { useI18n } from '@wordpress/react-i18n';
 import { getQueryArg } from '@wordpress/url';
 import { useEffect } from 'react';
 import DocumentHead from 'calypso/components/data/document-head';
-import { LoadingBar } from 'calypso/components/loading-bar';
-import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
 import useAddEcommerceTrialMutation from 'calypso/data/ecommerce/use-add-ecommerce-trial-mutation';
 import useAddTempSiteToSourceOptionMutation from 'calypso/data/site-migration/use-add-temp-site-mutation';
 import { useSourceMigrationStatusQuery } from 'calypso/data/site-migration/use-source-migration-status-query';
+import { StepperLoader } from 'calypso/landing/stepper/declarative-flow/internals/components';
 import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
 import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
@@ -310,18 +309,14 @@ const CreateSite: Step = function CreateSite( { navigation, flow, data } ) {
 				shouldHideNavButtons
 				hideFormattedHeader
 				stepName="create-site"
-				isHorizontalLayout
 				recordTracksEvent={ recordTracksEvent }
 				stepContent={
-					<>
-						<h1>{ getCurrentMessage() }</h1>
-						{ progress >= 0 || isWooExpressFlow( flow ) ? (
-							<LoadingBar progress={ progress } />
-						) : (
-							<LoadingEllipsis />
-						) }
-						{ subTitle && <p className="processing-step__subtitle">{ subTitle }</p> }
-					</>
+					<StepperLoader
+						title={ getCurrentMessage() }
+						subtitle={ subTitle }
+						progress={ progress }
+						flow={ flow }
+					/>
 				}
 				showFooterWooCommercePowered={ false }
 			/>

client/landing/stepper/declarative-flow/internals/steps-repository/create-site/styles.scss

@@ -7,7 +7,6 @@ $font-family: "SF Pro Text", $sans;
 		padding: 1em;
 		max-width: 540px;
 		text-align: center;
-		margin: 16vh auto 0;
 
 		.step-container__content {
 			margin: auto;

client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/style.scss

@@ -300,6 +300,7 @@
 
 // Launchpad - Processing Screens
 .processing {
+	.stepper-loader__progress-bar,
 	.processing-step__progress-bar {
 		background-color: #fff;
 	}
@@ -340,7 +341,10 @@
 	.progress-bar {
 		display: none;
 	}
+}
 
+.stepper-loader {
+	h1.stepper-loader__title,
 	h1.processing-step__progress-step {
 		font-size: $font-title-medium;
 

client/landing/stepper/declarative-flow/internals/steps-repository/processing-step/index.tsx

@@ -5,19 +5,16 @@ import {
 	isNewSiteMigrationFlow,
 	isUpdateDesignFlow,
 	ECOMMERCE_FLOW,
-	isWooExpressFlow,
-	isTransferringHostedSiteCreationFlow,
 	HUNDRED_YEAR_DOMAIN_FLOW,
 	HUNDRED_YEAR_PLAN_FLOW,
 	HUNDRED_YEAR_DOMAIN_TRANSFER,
 	isAnyHostingFlow,
 } from '@automattic/onboarding';
-import { ProgressBar } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useI18n } from '@wordpress/react-i18n';
 import { useEffect, useState, useRef } from 'react';
 import DocumentHead from 'calypso/components/data/document-head';
-import { LoadingBar } from 'calypso/components/loading-bar';
+import { StepperLoader } from 'calypso/landing/stepper/declarative-flow/internals/components';
 import availableFlows from 'calypso/landing/stepper/declarative-flow/registered-flows';
 import { useRecordSignupComplete } from 'calypso/landing/stepper/hooks/use-record-signup-complete';
 import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
@@ -33,6 +30,7 @@ import TailoredFlowPreCheckoutScreen from './tailored-flow-precheckout-screen';
 import type { StepProps } from '../../types';
 import type { OnboardSelect } from '@automattic/data-stores';
 import './style.scss';
+
 interface ProcessingStepProps extends StepProps {
 	title?: string;
 	subtitle?: string;
@@ -195,26 +193,6 @@ const ProcessingStep: React.FC< ProcessingStepProps > = function ( props ) {
 		return <HundredYearPlanFlowProcessingScreen />;
 	}
 
-	const subtitle = getSubtitle();
-
-	const renderProgressComponent = () => {
-		if ( isWooExpressFlow( flow ) || isTransferringHostedSiteCreationFlow( flow ) ) {
-			return (
-				<LoadingBar
-					progress={ progress }
-					className="processing-step__content woocommerce-install__content"
-				/>
-			);
-		}
-
-		return (
-			<ProgressBar
-				value={ progress >= 0 ? progress * 100 : undefined }
-				className="processing-step__progress-bar"
-			/>
-		);
-	};
-
 	return (
 		<>
 			<DocumentHead title={ __( 'Processing' ) } />
@@ -223,13 +201,12 @@ const ProcessingStep: React.FC< ProcessingStepProps > = function ( props ) {
 				hideFormattedHeader
 				stepName="processing-step"
 				stepContent={
-					<>
-						<div className="processing-step">
-							<h1 className="processing-step__progress-step">{ getCurrentMessage() }</h1>
-							{ renderProgressComponent() }
-							{ subtitle && <p className="processing-step__subtitle">{ subtitle }</p> }
-						</div>
-					</>
+					<StepperLoader
+						title={ getCurrentMessage() }
+						subtitle={ getSubtitle() }
+						progress={ progress }
+						flow={ flow }
+					/>
 				}
 				recordTracksEvent={ recordTracksEvent }
 				showJetpackPowered={ isJetpackPowered }