From 99aa3500fc5bbb3bb24d73461639e6fc88042a85 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Sat, 31 Jan 2026 13:55:14 +0700
Subject: fix description blink

---
 .../product-detail/components/ProductDetail.tsx    | 62 ++++++++++++----------
 1 file changed, 34 insertions(+), 28 deletions(-)

(limited to 'src-migrate')

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>
 
-- 
cgit v1.2.3