Add indicator style.

woocommerce · Sep 25, 2024 · 8239b47 · 8239b47
1 parent 2de300a
commit 8239b47
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.scss b/js/src/components/google-combo-account-card/connect-google-combo-account-card.scss
@@ -9,5 +9,15 @@
 		.gla-account-card__description {
 			gap: 0;
 		}
+
+		.gla-account-card__indicator {
+			color: #007CBA;
+			display: flex;
+			vertical-align: middle;
+
+			.components-spinner {
+				margin-top: 0;
+			}
+		}
 	}
 }
diff --git a/js/src/components/google-combo-account-card/connected-google-combo-account-card.js b/js/src/components/google-combo-account-card/connected-google-combo-account-card.js
@@ -3,6 +3,7 @@
  */
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { Spinner } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -97,6 +98,21 @@ const ConnectedGoogleComboAccountCard = ( { googleAccount } ) => {
 		);
 	};
 
+	const Indicator = () => {
+		if ( creatingAccounts ) {
+			return (
+				<>
+					<Spinner />
+					<span>
+						{ __( 'Creating…', 'google-listings-and-ads' ) }
+					</span>
+				</>
+			);
+		}
+
+		return null;
+	};
+
 	return (
 		<AccountCard
 			appearance={ APPEARANCE.GOOGLE }
@@ -111,7 +127,7 @@ const ConnectedGoogleComboAccountCard = ( { googleAccount } ) => {
 					p: <p></p>,
 				}
 			) }
-			indicator={ creatingAccounts ? 'Creating...' : null }
+			indicator={ <Indicator /> }
 		/>
 	);
 };