refactor(FE): Refactor table skeleton components for consistency

src/components/pages/finance/FinanceTable.tsx

@@ -44,6 +44,7 @@ import {
   FinanceTableFilterSchema,
   FinanceTableFilterValues,
 } from '@/components/pages/finance/filter/FinanceFilter';
+import FinanceTableSkeleton from '@/components/pages/finance/skeleton/FinanceTableSkeleton';
 
 const RowOptionsMenu = ({
   popoverPosition = 'bottom',
@@ -714,6 +715,20 @@ const FinanceTable = () => {
             <div className='w-full flex flex-row justify-center items-center p-4'>
               <span className='loading loading-spinner loading-xl' />
             </div>
+          ) : !isResponseSuccess(finances) || finances.data?.length === 0 ? (
+            <div className='p-3'>
+              <FinanceTableSkeleton
+                columns={columns}
+                icon={
+                  <Icon
+                    icon='heroicons:document-text'
+                    className='text-white'
+                    width={20}
+                    height={20}
+                  />
+                }
+              />
+            </div>
           ) : (
             <Table<Finance>
               data={isResponseSuccess(finances) ? finances.data : []}
@@ -727,10 +742,7 @@ const FinanceTable = () => {
               onPageSizeChange={setPageSize}
               isLoading={isLoading}
               className={{
-                containerClassName: cn('p-3 mb-0', {
-                  'w-full':
-                    isResponseSuccess(finances) && finances?.data?.length === 0,
-                }),
+                containerClassName: cn('p-3 mb-0'),
                 headerColumnClassName: 'text-nowrap',
               }}
             />

src/components/pages/finance/skeleton/FinanceTableSkeleton.tsx

@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { Finance } from '@/types/api/finance/finance';
+import { ColumnDef } from '@tanstack/react-table';
+
+const FinanceTableSkeleton = ({
+  columns,
+  icon,
+  title = 'No Data Available',
+  subtitle = 'There is no finance data displayed. Enter finance data to get started.',
+}: {
+  columns: ColumnDef<Finance>[];
+  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 FinanceTableSkeleton;