feat(FE): Add skeleton components for master data tables

src/components/pages/master-data/production-standard/ProductionStandardTable.tsx

@@ -13,10 +13,10 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
 import PopoverButton from '@/components/popover/PopoverButton';
 import PopoverContent from '@/components/popover/PopoverContent';
+import ProductionStandardTableSkeleton from '@/components/pages/master-data/production-standard/skeleton/ProductionStandardTableSkeleton';
 
 import { ProductionStandard } from '@/types/api/master-data/production-standard';
 import { ProductionStandardApi } from '@/services/api/master-data';
-import { cn } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
 const RowOptionsMenu = ({
@@ -201,25 +201,38 @@ const ProductionStandardTable = () => {
 
         {/* Table Section */}
         <div className='flex flex-col mb-4'>
-          <Table<ProductionStandard>
-            data={
-              isResponseSuccess(productionStandards)
-                ? productionStandards.data
-                : []
-            }
-            columns={productionStandardColumns}
-            isLoading={isLoading}
-            sorting={sorting}
-            setSorting={setSorting}
-            className={{
-              containerClassName: cn('p-3 mb-0', {
-                'w-full':
-                  isResponseSuccess(productionStandards) &&
-                  productionStandards?.data?.length === 0,
-              }),
-              headerColumnClassName: 'text-nowrap',
-            }}
-          />
+          {isLoading ? (
+            <div className='w-full flex flex-row justify-center items-center p-4'>
+              <span className='loading loading-spinner loading-xl' />
+            </div>
+          ) : !isResponseSuccess(productionStandards) ||
+            productionStandards.data?.length === 0 ? (
+            <div className='p-3'>
+              <ProductionStandardTableSkeleton
+                columns={productionStandardColumns}
+                icon={
+                  <Icon
+                    icon='heroicons:document-text'
+                    className='text-white'
+                    width={20}
+                    height={20}
+                  />
+                }
+              />
+            </div>
+          ) : (
+            <Table<ProductionStandard>
+              data={productionStandards.data}
+              columns={productionStandardColumns}
+              isLoading={false}
+              sorting={sorting}
+              setSorting={setSorting}
+              className={{
+                containerClassName: 'p-3 mb-0',
+                headerColumnClassName: 'text-nowrap',
+              }}
+            />
+          )}
         </div>
       </div>