Merged in Feature/category-management (pull request #187)

<iman> add skeleton

1 files changed, 63 insertions, 51 deletions

diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index 6ab03ec3..dda7cdc4 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -4,6 +4,7 @@ import NextImage from 'next/image';
 import Link from "next/link";
 import { createSlug } from '@/core/utils/slug';
 import odooApi from '@/core/api/odooApi';
+import { Skeleton} from '@chakra-ui/react'
 
 const CategoryDynamic = () => {
   const { categoryManagement } = useCategoryManagement();
@@ -41,62 +42,73 @@ const CategoryDynamic = () => {
 
   return (
     <div>
-      {categoryManagement && categoryManagement.data?.map((category) => {
-        const countLevel1 = categoryData[category.categoryIdI] || 0;
-        
-        return (
-          <div key={category.id}>
-            <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
-              <div className='font-semibold sm:text-h-lg mr-2'>{category.name}</div>
-              <p className='text-gray_r-10 text-sm'>{countLevel1} Produk tersedia</p>
-              <Link href={createSlug('/shop/category/', category?.name, category?.categoryIdI)} className="!text-red-500 font-semibold">Lihat Semua</Link>
-            </div>
-            <div className='grid grid-cols-3 gap-2'>
-              {category.categories.map((subCategory) => {
-                const countLevel2 = subCategoryData[subCategory.idLevel2] || 0;
+        {categoryManagement && categoryManagement.data?.map((category) => {
+          const countLevel1 = categoryData[category.categoryIdI] || 0;
+          
+          return (
+            <Skeleton isLoaded={categoryManagement}>
+            <div key={category.id}>
+              <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
+                <div className='font-semibold sm:text-h-lg mr-2'>{category.name}</div>
+                <p className={`text-gray_r-10 text-sm ${countLevel1 === 0 ? 'animate-pulse ' : ''}`}>
+                  {countLevel1 === 0 ? 'Menghitung jumlah produk...' : `${countLevel1} Produk tersedia`}
+              </p>
+                <Link href={createSlug('/shop/category/', category?.name, category?.categoryIdI)} className="!text-red-500 font-semibold">Lihat Semua</Link>
+              </div>
+              <div className='grid grid-cols-3 gap-2'>
+                {category.categories.map((subCategory) => {
+                  const countLevel2 = subCategoryData[subCategory.idLevel2] || 0;
 
-                return (
-                  <div key={subCategory.id} className='border rounded justify-start items-start'>
-                    <div className='p-3'>
-                      <div className='flex flex-row border rounded mb-2 justify-start items-center'>
-                        <NextImage
-                          src={subCategory.image ? subCategory.image : "/images/noimage.jpeg"}
-                          alt={subCategory.name}
-                          width={90}
-                          height={30}
-                          className='object-fit'
-                        />
-                        <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
-                          <div className='font-semibold text-lg mr-2'>{subCategory.name}</div>
-                          <p className='text-gray_r-10 text-sm'>{countLevel2} Produk tersedia</p>
-                          <Link href={createSlug('/shop/category/', subCategory?.name, subCategory?.idLevel2)} className="!text-red-500 font-semibold">Lihat Semua</Link>
-                        </div>
-                      </div>
-                      <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'>
-                        {subCategory.childFrontendIdI.map((childCategory) => (
-                          <div key={childCategory.id}>
-                            <Link href={createSlug('/shop/category/', childCategory?.name, childCategory?.idLevel3)} className="flex flex-row gap-2 border rounded group hover:border-red-500">
-                              <NextImage
-                                src={childCategory.image ? childCategory.image : "/images/noimage.jpeg"}
-                                alt={childCategory.name}
-                                width={40}
-                                height={40}
-                              />
-                              <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
-                                <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>{childCategory.name}</div>
-                              </div>
-                            </Link>
+                  return (
+                    <div key={subCategory.id} className='border rounded justify-start items-start'>
+                      <div className='p-3'>
+                        <div className='flex flex-row border rounded mb-2 justify-start items-center'>
+                          <NextImage
+                            src={subCategory.image ? subCategory.image : "/images/noimage.jpeg"}
+                            alt={subCategory.name}
+                            width={90}
+                            height={30}
+                            className='object-fit'
+                          />
+                          <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
+                            <div className='font-semibold text-lg mr-2'>{subCategory.name}</div>
+                            {/* <p className={`text-gray_r-10 text-sm ${countLevel2 === 0 ? 'animate-pulse ' : ''}`}>
+                              {countLevel2 === 0 ? 'Menghitung jumlah produk...' : `${countLevel2} Produk tersedia`}
+                            </p> */}
+                            <Skeleton isLoaded={countLevel2 != 0}>
+                            <p className={`text-gray_r-10 text-sm`}>
+                              {countLevel2} Produk tersedia
+                            </p>
+                            </Skeleton>
+                            <Link href={createSlug('/shop/category/', subCategory?.name, subCategory?.idLevel2)} className="!text-red-500 font-semibold">Lihat Semua</Link>
                           </div>
-                        ))}
+                        </div>
+                        <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'>
+                          {subCategory.childFrontendIdI.map((childCategory) => (
+                            <div key={childCategory.id}>
+                              <Link href={createSlug('/shop/category/', childCategory?.name, childCategory?.idLevel3)} className="flex flex-row gap-2 border rounded group hover:border-red-500">
+                                <NextImage
+                                  src={childCategory.image ? childCategory.image : "/images/noimage.jpeg"}
+                                  alt={childCategory.name}
+                                  width={40}
+                                  height={40}
+                                />
+                                <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
+                                  <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>{childCategory.name}</div>
+                                </div>
+                              </Link>
+                            </div>
+                          ))}
+                        </div>
                       </div>
                     </div>
-                  </div>
-                );
-              })}
+                  );
+                })}
+              </div>
             </div>
-          </div>
-        );
-      })}
+          </Skeleton>
+          );
+        })}
     </div>
   );
 };