Merge branch 'release' into feature/all-promotion

6 files changed, 23 insertions, 13 deletions

diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index 34f6d6b1..8487cd94 100644
--- a/src-migrate/modules/product-card/components/ProductCard.tsx
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -21,7 +21,7 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
   }
 
   const image = useMemo(() => {
-    if (product.image) return product.image + '?watermark=true'
+    if (product.image) return product.image + '?ratio=square'
     return '/images/noimage.jpeg'
   }, [product.image])
 
diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index fffe1480..b69cc87f 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -36,7 +36,7 @@ const Image = ({ product }: Props) => {
   const duration = moment.duration(count, 'seconds')
 
   const image = useMemo(() => {
-    if (product.image) return product.image + '?watermark=true'
+    if (product.image) return product.image + '?ratio=square'
     return '/images/noimage.jpeg'
   }, [product.image])
 
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 80f43aea..2bd3c901 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -23,6 +23,7 @@ import SimilarBottom from './SimilarBottom'
 import PriceAction from './PriceAction'
 import ProductPromoSection from '~/modules/product-promo/components/Section'
 import Breadcrumb from './Breadcrumb'
+import { LazyLoadComponent } from 'react-lazy-load-image-component'
 
 type Props = {
   product: IProductDetail
@@ -166,7 +167,9 @@ const ProductDetail = ({ product }: Props) => {
 
           <div className='h-6' />
 
-          <SimilarBottom product={product} />
+          <LazyLoadComponent>
+            <SimilarBottom product={product} />
+          </LazyLoadComponent>
         </div>
 
         <div className='h-6 md:h-0' />
diff --git a/src-migrate/modules/product-detail/components/SimilarBottom.tsx b/src-migrate/modules/product-detail/components/SimilarBottom.tsx
index 9a12a6ef..40d4dd82 100644
--- a/src-migrate/modules/product-detail/components/SimilarBottom.tsx
+++ b/src-migrate/modules/product-detail/components/SimilarBottom.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { Skeleton } from '@chakra-ui/react'
 import useProductSimilar from '~/modules/product-similar/hooks/useProductSimilar'
 import ProductSlider from '~/modules/product-slider'
 import { IProductDetail } from '~/types/product'
@@ -15,7 +15,15 @@ const SimilarBottom = ({ product }: Props) => {
 
   const products = productSimilar.data?.products || []
 
-  return <ProductSlider products={products} productLayout='vertical' />;
+  return (
+    <Skeleton
+      isLoaded={!productSimilar.isLoading}
+      rounded='lg'
+      className='h-[350px]'
+    >
+      <ProductSlider products={products} productLayout='vertical' />
+    </Skeleton>
+  );
 }
 
 export default SimilarBottom
\ No newline at end of file
diff --git a/src-migrate/modules/product-detail/components/SimilarSide.tsx b/src-migrate/modules/product-detail/components/SimilarSide.tsx
index 646a1c51..d70a314d 100644
--- a/src-migrate/modules/product-detail/components/SimilarSide.tsx
+++ b/src-migrate/modules/product-detail/components/SimilarSide.tsx
@@ -1,6 +1,4 @@
-import style from '../styles/side-similar.module.css'
-
-import React from 'react'
+import { Skeleton } from '@chakra-ui/react'
 
 import ProductCard from '~/modules/product-card'
 import useProductSimilar from '~/modules/product-similar/hooks/useProductSimilar'
@@ -19,7 +17,11 @@ const SimilarSide = ({ product }: Props) => {
   const products = productSimilar.data?.products || []
 
   return (
-    <div className={style['wrapper']}>
+    <Skeleton
+      isLoaded={!productSimilar.isLoading}
+      className="h-[500px] overflow-auto grid grid-cols-1 gap-y-4 divide-y divide-gray-300 border border-gray-300 rounded-lg"
+      rounded='lg'
+    >
       {products.map((product) => (
         <ProductCard
           key={product.id}
@@ -27,7 +29,7 @@ const SimilarSide = ({ product }: Props) => {
           layout='horizontal'
         />
       ))}
-    </div>
+    </Skeleton>
   )
 }
 
diff --git a/src-migrate/modules/product-detail/styles/side-similar.module.css b/src-migrate/modules/product-detail/styles/side-similar.module.css
deleted file mode 100644
index 08692efa..00000000
--- a/src-migrate/modules/product-detail/styles/side-similar.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.wrapper {
-    @apply max-h-[500px] overflow-auto grid grid-cols-1 gap-y-4 divide-y divide-gray-300 border border-gray-300 rounded-lg;
-}