diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/shop/product/[slug].js | 28 |
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> |