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 } from '@wordpress/components';
+import { Skeleton } from '@woocommerce/base-components/skeleton';
+
 /**
  * Internal dependencies
  */
@@ -19,19 +21,8 @@ const Edit = () => {
 
 	return (
 		<div { ...blockProps }>
+			<Skeleton numberOfLines={ 3 } />
 			<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' }

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

@@ -1,6 +1,7 @@
 .wc-block-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 {

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%;
+	}
+}