Add card placeholder

1 files changed, 28 insertions, 0 deletions

diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index 82c0fef1..10b4c322 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -13,6 +13,8 @@ import { LazyLoadImage } from "react-lazy-load-image-component";
 import 'swiper/css';
 import 'react-lazy-load-image-component/src/effects/blur.css';
 
+import ImagePlaceholderIcon from '../../../icons/image-placeholder.svg';
+
 
 export async function getServerSideProps(context) {
   const { slug } = context.query;
@@ -173,6 +175,32 @@ export default function ProductDetail({product}) {
           <Swiper freeMode={true} slidesPerView={2.15} spaceBetween={8} loop={true}>
             {similarProducts?.products?.map((product, index) => (<SwiperSlide key={index}><ProductCard data={product} /></SwiperSlide>))}
           </Swiper>
+          {similarProducts == 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>
+          ) : ''}
         </div>
 
       </div>