diff options
| author | FIN-IT_AndriFP <andrifebriyadiputra@gmail.com> | 2026-01-31 13:55:14 +0700 |
|---|---|---|
| committer | FIN-IT_AndriFP <andrifebriyadiputra@gmail.com> | 2026-01-31 13:55:14 +0700 |
| commit | 99aa3500fc5bbb3bb24d73461639e6fc88042a85 (patch) | |
| tree | 0787627b48ef1b1db8e6d76066eb3400afb71123 /src-migrate/modules/product-detail/components/ProductDetail.tsx | |
| parent | adecb2faf9bef2bb6f1740a8c8c5eb732117fc3d (diff) | |
fix description blink
Diffstat (limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx')
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductDetail.tsx | 62 |
1 files changed, 34 insertions, 28 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 13350433..35726437 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -21,7 +21,8 @@ import { Box, Spinner, Center, - Text + Text, + Stack } from '@chakra-ui/react'; // Import Icons @@ -53,6 +54,7 @@ import dynamic from 'next/dynamic'; import ProductComparisonModal from './ProductComparisonModal'; import { gtagProductDetail } from '@/core/utils/googleTag'; +import Skeleton from 'react-loading-skeleton'; type Props = { product: IProductDetail; @@ -601,33 +603,37 @@ const ProductDetail = ({ product }: Props) => { <TabPanels> {/* DESKRIPSI */} <TabPanel px={0} py={6}> - <div className='overflow-x-auto text-sm text-gray-700'> - <Box - className={style['description']} - sx={{ - 'ul, ol': { - marginTop: '0.5em !important', - marginBottom: '1em !important', - marginLeft: '0 !important', - - listStylePosition: 'outside !important', - paddingLeft: '1.5em !important' - }, - 'ul': { - listStyleType: 'disc !important' - }, - 'ol': { - listStyleType: 'decimal !important' - }, - - 'li': { - marginBottom: '0.4em !important', - paddingLeft: '0.3em !important', - lineHeight: '1.6 !important' - } - }} - dangerouslySetInnerHTML={{ __html: cleanDescription }} - /> + <div className='overflow-x-auto text-sm text-gray-700'> + {loadingSpecs ? ( + <Stack spacing={4}> + <Skeleton height='20px' width="100%" /> + <Skeleton height='20px' width="90%" /> + <Skeleton height='20px' width="95%" /> + <Skeleton height='20px' width="70%" /> + </Stack> + ) : ( + <Box + className={style['description']} + sx={{ + 'ul, ol': { + marginTop: '0.5em !important', + marginBottom: '1em !important', + marginLeft: '0 !important', + listStylePosition: 'outside !important', + paddingLeft: '1.5em !important' + }, + 'ul': { listStyleType: 'disc !important' }, + 'ol': { listStyleType: 'decimal !important' }, + 'li': { + marginBottom: '0.4em !important', + paddingLeft: '0.3em !important', + lineHeight: '1.6 !important' + } + }} + dangerouslySetInnerHTML={{ __html: cleanDescription }} + /> + )} + </div> </TabPanel> |