Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Create search loading state component for Marketplace (#39607)

This commit is contained in:
And Finally 2023-08-09 11:52:18 +01:00 committed by GitHub
parent e7a57502e4 4fc7fba118
commit 172234b5a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 88 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
plugins/woocommerce-admin/client/marketplace/components/product-loader/product-loader.scss Normal file
View File

@ -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;
}
}

20
plugins/woocommerce-admin/client/marketplace/components/product-loader/product-loader.tsx Normal file
View File

@ -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>
);
}