Create search loading state component for Marketplace (#39607)

andfinally · web-flow · commit 172234b5a964 · 2023-08-09T11:52:18.000+01:00
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-loader/product-loader.scss b/plugins/woocommerce-admin/client/marketplace/components/product-loader/product-loader.scss
@@ -0,0 +1,68 @@
+@import '../../stylesheets/_variables.scss';
+
+.woocommerce-marketplace {
+	&__product-loader-cards {
+		display: grid;
+		background: linear-gradient(to right, $gray-0 40%, $gray-5 60%, $gray-0 80%);
+		background-color: $gray-0;
+		background-size: 500% 200%;
+		animation: GradientSlide 4s linear infinite;
+		height: 270px;
+	}
+
+	&__product-loader-divider {
+		background: #fff;
+		width: 24px;
+		display: none;
+	}
+
+	.divider-1 {
+		grid-column-start: 2;
+	}
+}
+
+@media screen and (min-width: $breakpoint-medium) {
+	.woocommerce-marketplace {
+		&__product-loader-cards {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		.divider-1 {
+			display: block;
+		}
+	}
+}
+
+@media screen and (min-width: $breakpoint-large) {
+	.woocommerce-marketplace {
+		&__product-loader-cards {
+			grid-template-columns: repeat(3, 1fr);
+		}
+
+		.divider-2 {
+			display: block;
+		}
+	}
+}
+
+@media screen and (min-width: $breakpoint-xlarge) {
+	.woocommerce-marketplace {
+		&__product-loader-cards {
+			grid-template-columns: repeat(4, 1fr);
+		}
+
+		.divider-3 {
+			display: block;
+		}
+	}
+}
+
+@keyframes GradientSlide {
+	0% {
+		background-position: 100% 0;
+	}
+
+	100% {
+		background-position: -100% 0;
+	}
+}
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-loader/product-loader.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-loader/product-loader.tsx
@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import './product-loader.scss';
+
+export default function ProductLoader(): JSX.Element {
+	return (
+		<div className="woocommerce-marketplace__product-loader">
+			<div className="woocommerce-marketplace__product-loader-cards">
+				<div className="woocommerce-marketplace__product-loader-divider divider-1"></div>
+				<div className="woocommerce-marketplace__product-loader-divider divider-2"></div>
+				<div className="woocommerce-marketplace__product-loader-divider divider-3"></div>
+			</div>
+		</div>
+	);
+}
