refactor(FE): Add skeleton loaders for ProjectFlock and TransferToLaying

tables
This commit is contained in:
rstubryan
2026-03-02 11:56:27 +07:00
parent d96388e5f4
commit d3501e5f3d
4 changed files with 194 additions and 74 deletions
@@ -22,6 +22,7 @@ import Dropdown from '@/components/Dropdown';
import StatusBadge from '@/components/helper/StatusBadge';
import TransferToLayingFilterModal from '@/components/pages/production/transfer-to-laying/TransferToLayingFilterModal';
import TransferToLayingConfirmationModal from '@/components/pages/production/transfer-to-laying/TransferToLayingConfirmationModal';
import TransferToLayingTableSkeleton from '@/components/pages/production/transfer-to-laying/skeleton/TransferToLayingTableSkeleton';
import {
TransferToLaying,
@@ -596,40 +597,61 @@ const TransferToLayingsTable = () => {
</div>
</div>
<Table<TransferToLaying>
data={
isResponseSuccess(transferToLayings) ? transferToLayings?.data : []
}
columns={transferToLayingsColumns}
pageSize={tableFilterState.pageSize}
page={
isResponseSuccess(transferToLayings)
? transferToLayings?.meta?.page
: 0
}
totalItems={
isResponseSuccess(transferToLayings)
? transferToLayings?.meta?.total_results
: 0
}
onPageChange={setPage}
onPageSizeChange={setPageSize}
isLoading={isLoading}
sorting={sorting}
setSorting={setSorting}
rowSelection={rowSelection}
setRowSelection={setRowSelection}
enableRowSelection={tableEnableRowSelectionHandler}
withCheckbox
className={{
containerClassName: cn('p-3', {
'w-full mb-20':
isResponseSuccess(transferToLayings) &&
transferToLayings?.data?.length === 0,
}),
headerColumnClassName: 'text-nowrap',
}}
/>
<div className='flex flex-col mb-4'>
{isLoading ? (
<div className='w-full flex flex-row justify-center items-center p-4'>
<span className='loading loading-spinner loading-xl' />
</div>
) : !isResponseSuccess(transferToLayings) ||
transferToLayings.data?.length === 0 ? (
<div className='p-3'>
<TransferToLayingTableSkeleton
columns={transferToLayingsColumns}
icon={
<Icon
icon='heroicons:document-text'
className='text-white'
width={20}
height={20}
/>
}
/>
</div>
) : (
<Table<TransferToLaying>
data={
isResponseSuccess(transferToLayings)
? transferToLayings?.data
: []
}
columns={transferToLayingsColumns}
pageSize={tableFilterState.pageSize}
page={
isResponseSuccess(transferToLayings)
? transferToLayings?.meta?.page
: 0
}
totalItems={
isResponseSuccess(transferToLayings)
? transferToLayings?.meta?.total_results
: 0
}
onPageChange={setPage}
onPageSizeChange={setPageSize}
isLoading={isLoading}
sorting={sorting}
setSorting={setSorting}
rowSelection={rowSelection}
setRowSelection={setRowSelection}
enableRowSelection={tableEnableRowSelectionHandler}
withCheckbox
className={{
containerClassName: cn('p-3 mb-0'),
headerColumnClassName: 'text-nowrap',
}}
/>
)}
</div>
</div>
<TransferToLayingFilterModal