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',
               }}
             />