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 new file mode 100644 index 00000000000..e33965554bf --- /dev/null +++ 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 new file mode 100644 index 00000000000..293b1b6e4ba --- /dev/null +++ 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 ( +
+
+
+
+
+
+
+ ); +}