Add loading state onto the UI of ProductFeedStatusSection component

Author: eason9487

js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.js

@@ -4,22 +4,19 @@
 import { sprintf, __, _n } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
 import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
+import { Spinner } from '@woocommerce/components';
 
 /**
  * Internal dependencies
  */
 import Section from '.~/wcdl/section';
 import AppDocumentationLink from '.~/components/app-documentation-link';
-import SyncIcon from '.~/components/sync-icon';
+import SuccessIcon from '.~/components/success-icon';
 import AppTooltip from '.~/components/app-tooltip';
 import useSyncableProductsCalculation from '.~/hooks/useSyncableProductsCalculation';
 import './product-feed-status-section.scss';
 
 function ProductQuantity( { quantity } ) {
-	if ( ! Number.isInteger( quantity ) ) {
-		return null;
-	}
-
 	const text = sprintf(
 		// translators: %d: number of products will be synced to Google Merchant Center.
 		_n( '%d product', '%d products', quantity, 'google-listings-and-ads' ),
@@ -59,6 +56,8 @@ export default function ProductFeedStatusSection() {
 		retrieve();
 	}, [ retrieve ] );
 
+	const isReady = Number.isInteger( count );
+
 	return (
 		<Section
 			className="gla-product-feed-status-section"
@@ -77,15 +76,28 @@ export default function ProductFeedStatusSection() {
 				<Section.Card.Body>
 					<Flex align="flex-start" gap={ 3 }>
 						<FlexItem>
-							<SyncIcon />
+							{ isReady ? (
+								<SuccessIcon size={ 20 } />
+							) : (
+								<Spinner />
+							) }
 						</FlexItem>
 						<FlexBlock>
 							<Section.Card.Title>
-								{ __(
-									'Your product listings are being uploaded',
-									'google-listings-and-ads'
+								{ isReady ? (
+									<>
+										{ __(
+											'Your product listings are ready to be uploaded',
+											'google-listings-and-ads'
+										) }
+										<ProductQuantity quantity={ count } />
+									</>
+								) : (
+									__(
+										'Preparing your product listings',
+										'google-listings-and-ads'
+									)
 								) }
-								<ProductQuantity quantity={ count } />
 							</Section.Card.Title>
 							{ __(
 								'Google will review your product listings within 3-5 days. Once approved, your products will automatically be live and searchable on Google. You’ll be notified if there are any product feed issues.',

js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.scss

@@ -1,7 +1,13 @@
 .gla-product-feed-status-section {
-	.gla-sync-icon {
-		fill: $gla-color-green;
-		transform: rotateZ(90deg);
+	.woocommerce-spinner {
+		width: 20px;
+		height: 20px;
+		min-width: 20px;
+
+		&__circle {
+			stroke: $gray-700;
+			stroke-width: 8px;
+		}
 	}
 
 	.wcdl-subsection-title {