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

src/components/pages/master-data/area/AreasTable.tsx

@@ -11,13 +11,13 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 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 RequirePermission from '@/components/helper/RequirePermission';
+import AreaTableSkeleton from '@/components/pages/master-data/area/skeleton/AreaTableSkeleton';
 
 import { Area } from '@/types/api/master-data/area';
 import { AreaApi } from '@/services/api/master-data';
-import { cn } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 
@@ -241,26 +241,44 @@ const AreasTable = () => {
 
         {/* Table Section */}
         <div className='flex flex-col mb-4'>
-          <Table<Area>
-            data={isResponseSuccess(areas) ? areas?.data : []}
-            columns={areasColumns}
-            pageSize={tableFilterState.pageSize}
-            page={isResponseSuccess(areas) ? areas?.meta?.page : 0}
-            totalItems={
-              isResponseSuccess(areas) ? areas?.meta?.total_results : 0
-            }
-            onPageChange={setPage}
-            onPageSizeChange={setPageSize}
-            isLoading={isLoading}
-            sorting={sorting}
-            setSorting={setSorting}
-            className={{
-              containerClassName: cn('p-3 mb-0', {
-                'w-full': isResponseSuccess(areas) && areas?.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(areas) || areas.data?.length === 0 ? (
+            <div className='p-3'>
+              <AreaTableSkeleton
+                columns={areasColumns}
+                icon={
+                  <Icon
+                    icon='heroicons:document-text'
+                    className='text-white'
+                    width={20}
+                    height={20}
+                  />
+                }
+              />
+            </div>
+          ) : (
+            <Table<Area>
+              data={isResponseSuccess(areas) ? areas?.data : []}
+              columns={areasColumns}
+              pageSize={tableFilterState.pageSize}
+              page={isResponseSuccess(areas) ? areas?.meta?.page : 0}
+              totalItems={
+                isResponseSuccess(areas) ? areas?.meta?.total_results : 0
+              }
+              onPageChange={setPage}
+              onPageSizeChange={setPageSize}
+              isLoading={isLoading}
+              sorting={sorting}
+              setSorting={setSorting}
+              className={{
+                containerClassName: 'p-3 mb-0',
+                headerColumnClassName: 'text-nowrap',
+              }}
+            />
+          )}
         </div>
       </div>
 

src/components/pages/master-data/area/skeleton/AreaTableSkeleton.tsx

@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { Area } from '@/types/api/master-data/area';
+import { ColumnDef } from '@tanstack/react-table';
+
+const AreaTableSkeleton = ({
+  columns,
+  icon,
+  title = 'No Data Available',
+  subtitle = 'There is no area data displayed. Enter area data to get started.',
+}: {
+  columns: ColumnDef<Area>[];
+  icon: React.ReactNode;
+  title?: string;
+  subtitle?: string;
+}) => {
+  return (
+    <div className='relative size-full'>
+      <Table
+        data={[]}
+        columns={columns}
+        isLoading={true}
+        className={{
+          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
+          headerColumnClassName: 'whitespace-nowrap',
+          containerClassName: 'mb-0 overflow-hidden',
+          tableWrapperClassName: 'overflow-hidden',
+        }}
+      />
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
+      </div>
+    </div>
+  );
+};
+
+export default AreaTableSkeleton;