Add to Cart Form: Replace Notice with Skeleton component

assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx

@@ -3,7 +3,9 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { Button, Disabled, Notice } from '@wordpress/components';
+import { Button, Disabled, Tooltip } from '@wordpress/components';
+import { Skeleton } from '@woocommerce/base-components/skeleton';
+
 /**
  * Internal dependencies
  */
@@ -19,31 +21,34 @@ const Edit = () => {
 
 	return (
 		<div { ...blockProps }>
-			<Disabled>
-				<Notice
-					className={ 'wc-block-add-to-cart-form__notice' }
-					status={ 'warning' }
-					isDismissible={ false }
-				>
-					<p>
-						{ __(
-							'Customers will see product add-to-cart options displayed here, dependent on the product type.',
-							'woo-gutenberg-products-block'
-						) }
-					</p>
-				</Notice>
-				<input
-					type={ 'number' }
-					value={ '1' }
-					className={ 'wc-block-add-to-cart-form__quantity' }
-				/>
-				<Button
-					variant={ 'primary' }
-					className={ 'wc-block-add-to-cart-form__button' }
-				>
-					{ __( 'Add to cart', 'woo-gutenberg-products-block' ) }
-				</Button>
-			</Disabled>
+			<Tooltip
+				text="Customer will see product add-to-cart options in this space, dependend on the product type. "
+				position="bottom right"
+			>
+				<div className="wc-block-editor-container">
+					<Skeleton numberOfLines={ 3 } />
+					<Disabled>
+						<input
+							type={ 'number' }
+							value={ '1' }
+							className={
+								'wc-block-editor-add-to-cart-form__quantity'
+							}
+						/>
+						<Button
+							variant={ 'primary' }
+							className={
+								'wc-block-editor-add-to-cart-form__button'
+							}
+						>
+							{ __(
+								'Add to cart',
+								'woo-gutenberg-products-block'
+							) }
+						</Button>
+					</Disabled>
+				</div>
+			</Tooltip>
 		</div>
 	);
 };

assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss

@@ -1,15 +1,10 @@
-.wc-block-add-to-cart-form {
+.wc-block-editor-add-to-cart-form {
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
+	row-gap: $default-block-margin;
 }
 
-.wc-block-add-to-cart-form__notice.components-notice {
-	margin: 10px 0;
-	color: $black;
-	max-width: 60%;
-}
-
-input.wc-block-add-to-cart-form__quantity[type="number"] {
+input.wc-block-editor-add-to-cart-form__quantity[type="number"] {
 	max-width: 50px;
 	min-height: 23px;
 	float: left;
@@ -28,3 +23,10 @@ button.components-button.wc-block-add-to-cart-form__button {
 	padding: 20px 30px;
 	border-radius: 0;
 }
+
+.wc-block-editor-container {
+	cursor: help;
+	gap: 10px;
+	display: flex;
+	flex-direction: column;
+}

assets/js/base/components/skeleton/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export interface SkeletonProps {
+	numberOfLines?: number;
+}
+
+export const Skeleton = ( {
+	numberOfLines = 1,
+}: SkeletonProps ): JSX.Element => {
+	const skeletonLines = Array( numberOfLines ).fill(
+		<span
+			className="wc-block-components-skeleton-text-line"
+			aria-hidden="true"
+		/>
+	);
+	return (
+		<div className="wc-block-components-skeleton">{ skeletonLines }</div>
+	);
+};

assets/js/base/components/skeleton/style.scss

@@ -0,0 +1,19 @@
+.wc-block-components-skeleton {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	width: 100%;
+
+}
+
+.wc-block-components-skeleton-text-line {
+	height: 0.8em;
+	width: 100%;
+	position: relative;
+	background: $gray-200;
+	border-radius: 2em;
+
+	&:last-child {
+		width: 80%;
+	}
+}