From b572fcf8d6c37beb65963c7f599b44344361bb9a Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Thu, 7 Oct 2021 10:06:05 +0700
Subject: [PATCH] :art: styles: card product skeleton

:%s
---
 pages/test.tsx                                | 32 ++++---------------
 .../ListProductCardSkeleton.module.scss       | 12 +++++++
 .../ListProductCardSkeleton.tsx               | 21 ++++++++++++
 .../ProductCardSkeleton.module.scss           | 15 +++++++++
 .../ProductCardSkeleton.tsx                   | 17 ++++++++++
 .../ProductList/ProductList.module.scss       | 11 ++++++-
 .../SkeletonImage/SkeletonImage.module.scss   |  2 +-
 .../SkeletonParagraph.module.scss             |  1 +
 src/components/common/index.ts                |  3 +-
 .../ProductListFilter/ProductListFilter.tsx   |  4 +--
 10 files changed, 88 insertions(+), 30 deletions(-)
 create mode 100644 src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.module.scss
 create mode 100644 src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx
 create mode 100644 src/components/common/ProductCardSkeleton/ProductCardSkeleton.module.scss
 create mode 100644 src/components/common/ProductCardSkeleton/ProductCardSkeleton.tsx

diff --git a/pages/test.tsx b/pages/test.tsx
index 6244c3dd6..f9075c7e6 100644
--- a/pages/test.tsx
+++ b/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: {},
   }
 }
 
diff --git a/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.module.scss b/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.module.scss
new file mode 100644
index 000000000..f8dfec116
--- /dev/null
+++ b/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;
+        }
+    }
+}
diff --git a/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx b/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx
new file mode 100644
index 000000000..218f9fb11
--- /dev/null
+++ b/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
diff --git a/src/components/common/ProductCardSkeleton/ProductCardSkeleton.module.scss b/src/components/common/ProductCardSkeleton/ProductCardSkeleton.module.scss
new file mode 100644
index 000000000..69881f7c9
--- /dev/null
+++ b/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;
+        }
+    }
+}
diff --git a/src/components/common/ProductCardSkeleton/ProductCardSkeleton.tsx b/src/components/common/ProductCardSkeleton/ProductCardSkeleton.tsx
new file mode 100644
index 000000000..52c4b0fea
--- /dev/null
+++ b/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
diff --git a/src/components/common/ProductList/ProductList.module.scss b/src/components/common/ProductList/ProductList.module.scss
index e13b6649c..0ec1a2864 100644
--- a/src/components/common/ProductList/ProductList.module.scss
+++ b/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;
diff --git a/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss b/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss
index d9607adec..3f180ae4a 100644
--- a/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss
+++ b/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 {
diff --git a/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss b/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss
index 1ebd6e413..992702894 100644
--- a/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss
+++ b/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss
@@ -1,6 +1,7 @@
 @import '../../../../styles/utilities';
 
 .skeletonParagraph {
+    @apply overflow-hidden;
     margin: 0 1.6rem;
 
     .row {
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index eaa33176c..2b986130b 100644
--- a/src/components/common/index.ts
+++ b/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'
 
diff --git a/src/components/modules/product-list/ProductListFilter/ProductListFilter.tsx b/src/components/modules/product-list/ProductListFilter/ProductListFilter.tsx
index 17612866c..f99e50c0d 100644
--- a/src/components/modules/product-list/ProductListFilter/ProductListFilter.tsx
+++ b/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>