Product skeleton

3 files changed, 41 insertions, 37 deletions

diff --git a/src/components/elements/Skeleton.js b/src/components/elements/Skeleton.js
index 0a0bbc78..fbdbc245 100644
--- a/src/components/elements/Skeleton.js
+++ b/src/components/elements/Skeleton.js
@@ -1,3 +1,5 @@
+import ImagePlaceholderIcon from "../../icons/image-placeholder.svg";
+
 const SkeletonList = ({ number }) => (
   <div role="status" className="space-y-6 animate-pulse">
     { Array.from(Array(number), (e, i) => (
@@ -13,6 +15,34 @@ const SkeletonList = ({ number }) => (
   </div>
 );
 
+const SkeletonProduct = () => (
+  <div className="grid grid-cols-2 gap-x-4">
+    <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
+      <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
+      <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
+      </div>
+      <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
+      <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
+      <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
+      <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
+      <div className="h-2 bg-gray-200 rounded-full"></div>
+      <span className="sr-only">Loading...</span>
+    </div>
+    <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
+      <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
+        <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
+      </div>
+      <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
+      <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
+      <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
+      <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
+      <div className="h-2 bg-gray-200 rounded-full"></div>
+      <span className="sr-only">Loading...</span>
+    </div>
+  </div>
+);
+
 export {
-  SkeletonList
+  SkeletonList,
+  SkeletonProduct
 };
\ No newline at end of file
diff --git a/src/components/products/ProductSlider.js b/src/components/products/ProductSlider.js
index cf663995..4cc98eb7 100644
--- a/src/components/products/ProductSlider.js
+++ b/src/components/products/ProductSlider.js
@@ -1,9 +1,9 @@
 import { Swiper, SwiperSlide } from "swiper/react";
 import ProductCard from "./ProductCard";
-import ImagePlaceholderIcon from "../../icons/image-placeholder.svg";
 import "swiper/css";
 import Image from "../elements/Image";
 import Link from "../elements/Link";
+import { SkeletonProduct } from "../elements/Skeleton";
 
 export default function ProductSlider({ 
   products, 
@@ -12,7 +12,7 @@ export default function ProductSlider({
   return (
     <>
       { bannerMode && (
-        <Image src={products.image} alt={products.name} className="absolute top-0 left-0 h-full max-w-[55%]" />
+        <Image src={products.banner.image} alt={products.banner.name} className="absolute top-0 left-0 h-full max-w-[55%]" />
       ) }
       <Swiper freeMode={true} slidesPerView={2.2} spaceBetween={8}>
         { bannerMode && (
@@ -26,32 +26,7 @@ export default function ProductSlider({
           </SwiperSlide>
         ))}
       </Swiper>
-      {products == null ? (
-        <div className="grid grid-cols-2 gap-x-4">
-          <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
-            <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
-            <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
-            </div>
-            <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
-            <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
-            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-            <div className="h-2 bg-gray-200 rounded-full"></div>
-            <span className="sr-only">Loading...</span>
-          </div>
-          <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
-            <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
-              <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
-            </div>
-            <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
-            <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
-            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-            <div className="h-2 bg-gray-200 rounded-full"></div>
-            <span className="sr-only">Loading...</span>
-          </div>
-        </div>
-      ) : ''}
+      { !products ? <SkeletonProduct /> : ''}
     </>
   )
 }
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 8c636616..b233f81e 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -25,7 +25,6 @@ export async function getServerSideProps() {
 
 export default function Home({ heroBanners }) {
   const [manufactures, setManufactures] = useState(null);
-  const [readyStockProducts, setReadyStockProducts] = useState(null);
   const [popularProducts, setPopularProducts] = useState(null);
   const [categoryProducts, setCategoryProducts] = useState(null);
 
@@ -35,12 +34,6 @@ export default function Home({ heroBanners }) {
       setManufactures(dataManufactures);
     }
     getManufactures();
-    
-    const getReadyStockProducts = async () => {
-      const dataReadyStockProducts = await apiOdoo('GET', `/api/v1/product?ready_stock=1&limit=30`);
-      setReadyStockProducts(dataReadyStockProducts);
-    }
-    getReadyStockProducts();
 
     const getPopularProducts = async () => {
       const dataPopularProducts = await axios(`${process.env.SELF_HOST}/api/shop/search?q=*&page=1&order_by=popular`);
@@ -92,7 +85,13 @@ export default function Home({ heroBanners }) {
         { categoryProducts?.map((categoryProduct) => (
           <div className="my-6 px-4 py-3 relative" key={categoryProduct.id}>
             <ProductSlider 
-              products={categoryProduct} 
+              products={categoryProduct ? {
+                products: categoryProduct.products,
+                banner: {
+                  image: categoryProduct.image,
+                  name: categoryProduct.name
+                }
+              } : null} 
               bannerMode={true}
             />
           </div>