🎨 styles: card product skeleton

:%s

pages/test.tsx

@@ -1,6 +1,6 @@
 import commerce from '@lib/api/commerce';
 import { GetStaticPropsContext } from 'next';
-import { Layout } from 'src/components/common';
+import { Layout, ListProductCardSkeleton } from 'src/components/common';
 
 interface Props {
   products: any
@@ -8,10 +8,11 @@ interface Props {
 export default function Home({ products }: Props) {
   return (
     <>
-      <p>
-        TOTAL: {products?.length}
-      </p>
-      {JSON.stringify(products[0])}
+      {/* <ListProductCardSkeleton /> */}
+      {/* <ListProductCardSkeleton count={1} /> */}
+      <ListProductCardSkeleton count={10} />
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab qui magnam debitis ex laborum laboriosam suscipit! Totam excepturi eum libero.
+      <ListProductCardSkeleton count={10} isWrap/>
     </>
   )
 }
@@ -22,28 +23,9 @@ export async function getServerSideProps({
   locale,
   locales,
 }: GetStaticPropsContext) {
-  const config = { locale, locales }
-  const productsPromise = commerce.getAllProducts({
-    // const productsPromise = commerce.getAllFacets({
-    variables: {
-      first: 70,
-      //  filter: {
-      //   name: {
-      //     contains: 'ca'
-      //   }
-      // }
-    },
-    config,
-    preview,
-    // Saleor provider only
-    ...({ featured: true } as any),
-  })
-
-  const { products } = await productsPromise
-
 
   return {
-    props: { products },
+    props: {},
   }
 }
 

src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.module.scss

@@ -0,0 +1,12 @@
+.listProductCardSkeleton {
+    display: flex;
+    overflow: hidden;
+
+    &.wrap {
+        flex-wrap: wrap;
+        overflow: unset;
+        > div {
+            margin-bottom: 1.6rem;
+        }
+    }
+}

src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx

@@ -0,0 +1,21 @@
+import classNames from 'classnames'
+import { ProductCardSkeleton } from '..'
+import s from './ListProductCardSkeleton.module.scss'
+
+type Props = {
+  count?: number
+  isWrap?: boolean
+}
+const ListProductCardSkeleton = ({ count = 5, isWrap }: Props) => {
+
+  return (
+    <div className={classNames(s.listProductCardSkeleton, { [s.wrap]: isWrap })}>
+      {
+        Array.from(Array(count).keys()).map(item => <ProductCardSkeleton key={item} />)
+
+      }
+    </div>
+  )
+}
+
+export default ListProductCardSkeleton

src/components/common/ProductCardSkeleton/ProductCardSkeleton.module.scss

@@ -0,0 +1,15 @@
+.productCardSkeleton {
+    max-width: 22.4rem;
+    min-width: 20rem;
+    margin: 0 0.8rem;
+    > div {
+        width: 100% !important;
+    }
+    .content {
+        margin-top: 1.6rem;
+        > div {
+            margin: 0;
+            width: 100% !important;
+        }
+    }
+}

src/components/common/ProductCardSkeleton/ProductCardSkeleton.tsx

@@ -0,0 +1,17 @@
+import SkeletonImage from "../SkeletonCommon/SkeletonImage/SkeletonImage"
+import SkeletonParagraph from "../SkeletonCommon/SkeletonParagraph/SkeletonParagraph"
+import s from './ProductCardSkeleton.module.scss'
+
+const ProductCardSkeleton = ({ }) => {
+
+  return (
+    <div className={s.productCardSkeleton}>
+      <SkeletonImage />
+      <div className={s.content}>
+        <SkeletonParagraph rows={3} />
+      </div>
+    </div>
+  )
+}
+
+export default ProductCardSkeleton

src/components/common/ProductList/ProductList.module.scss

@@ -1,7 +1,16 @@
 .wrapper {
     margin: 4rem auto;
     .list {
-        @apply flex flex-wrap justify-around;
+        @apply grid grid-cols-2;
+        @screen md {
+            @apply grid-cols-3;
+        }
+        @screen lg {
+            @apply grid-cols-4;
+        }
+        @screen xl {
+            @apply grid-cols-6;
+        }
         .empty {
             button {
                 margin-top: 1.6rem;

src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss

@@ -1,7 +1,7 @@
 @import '../../../../styles/utilities';
 
 .skeletonImage {
-    @apply relative;
+    @apply relative overflow-hidden;
     background: #DDDBDD;
 
     &.small {

src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss

@@ -1,6 +1,7 @@
 @import '../../../../styles/utilities';
 
 .skeletonParagraph {
+    @apply overflow-hidden;
     margin: 0 1.6rem;
 
     .row {

src/components/common/index.ts

@@ -51,5 +51,6 @@ export { default as LayoutCheckout} from './LayoutCheckout/LayoutCheckout'
 export { default as InputPasswordFiledInForm} from './InputPasswordFiledInForm/InputPasswordFiledInForm'
 export { default as InputFiledInForm} from './InputFiledInForm/InputFiledInForm'
 export { default as MessageCommon} from './MessageCommon/MessageCommon'
-
+export { default as ProductCardSkeleton} from './ProductCardSkeleton/ProductCardSkeleton'
+export { default as ListProductCardSkeleton} from './ListProductCardSkeleton/ListProductCardSkeleton'
 

src/components/modules/product-list/ProductListFilter/ProductListFilter.tsx

@@ -2,7 +2,7 @@ import { ProductCard } from '@commerce/types/product'
 import { Collection, Facet, FacetValue, QuerySearchArgs } from '@framework/schema'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
-import { HeadingCommon, ProductList } from 'src/components/common'
+import { HeadingCommon, ListProductCardSkeleton, ProductList } from 'src/components/common'
 import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon'
 import SkeletonImage from 'src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage'
 import { useSearchProducts } from 'src/components/hooks/product'
@@ -108,7 +108,7 @@ const ProductListFilter = ({ facets, collections, products, total }: ProductList
             </div>
           </div>
           {
-            (!initialQueryFlag && loading && !productSearchResult) && <SkeletonImage />
+            (!initialQueryFlag && loading && !productSearchResult) && <ListProductCardSkeleton count={DEFAULT_PAGE_SIZE} isWrap/>
           }
           <ProductList data={initialQueryFlag ? products : (productSearchResult || [])} total={totalItems !== undefined ? totalItems : total} onPageChange={onPageChange} defaultCurrentPage={currentPage} />
         </div>