diff options
| author | IT Fixcomart <it@fixcomart.co.id> | 2022-11-02 12:01:32 +0700 |
|---|---|---|
| committer | IT Fixcomart <it@fixcomart.co.id> | 2022-11-02 12:01:32 +0700 |
| commit | 4e1bc974c409cc1707aae5857377c3bd20767ea3 (patch) | |
| tree | 0308d7dfd9869ae6d3954df0301a76933fcd34d8 /src/pages | |
| parent | 72fbc1cf1c4768ffbb5028c2c46537732ed89112 (diff) | |
Add card placeholder
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> |