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

tables

src/components/pages/production/project-flock/ProjectFlockTable.tsx

@@ -32,6 +32,7 @@ import StatusBadge from '@/components/helper/StatusBadge';
 import PopoverButton from '@/components/popover/PopoverButton';
 import PopoverContent from '@/components/popover/PopoverContent';
 import ProjectFlockConfirmationModal from './ProjectFlockConfirmationModal';
+import ProjectFlockTableSkeleton from '@/components/pages/production/project-flock/skeleton/ProjectFlockTableSkeleton';
 import { useProjectFlockStore } from '@/stores/production/project-flock/project-flock.store';
 import { ProjectFlockFormValues } from './form/ProjectFlockForm.schema';
 import { useChickinStore } from '@/stores/production/chickin/chickin.store';
@@ -997,46 +998,69 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
             </div>
           </div>
 
-          <Table<ProjectFlock>
+          <div className='flex flex-col mb-4'>
-            data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []}
+            {isLoading ? (
-            columns={columns}
+              <div className='w-full flex flex-row justify-center items-center p-4'>
-            pageSize={tableFilterState.pageSize}
+                <span className='loading loading-spinner loading-xl' />
-            page={
+              </div>
-              isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0
+            ) : !isResponseSuccess(projectFlocks) ||
-            }
+              projectFlocks.data?.length === 0 ? (
-            totalItems={
+              <div className='p-3'>
-              isResponseSuccess(projectFlocks)
+                <ProjectFlockTableSkeleton
-                ? projectFlocks?.meta?.total_results
+                  columns={columns}
-                : 0
+                  icon={
-            }
+                    <Icon
-            onPageChange={(page) => {
+                      icon='heroicons:document-text'
-              setPage(page);
+                      className='text-white'
-            }}
+                      width={20}
-            onPageSizeChange={(pageSize) => {
+                      height={20}
-              setPageSize(pageSize);
+                    />
-            }}
+                  }
-            isLoading={isLoading}
+                />
-            sorting={sorting}
+              </div>
-            setSorting={setSorting}
+            ) : (
-            rowSelection={rowSelection}
+              <Table<ProjectFlock>
-            setRowSelection={setRowSelection}
+                data={
-            enableRowSelection={(row) => {
+                  isResponseSuccess(projectFlocks) ? projectFlocks?.data : []
-              const projectFlock = row.original;
+                }
-              return (
+                columns={columns}
-                projectFlock.approval?.step_number === 1 &&
+                pageSize={tableFilterState.pageSize}
-                projectFlock.approval?.action !== 'REJECTED'
+                page={
-              );
+                  isResponseSuccess(projectFlocks)
-            }}
+                    ? projectFlocks?.meta?.page
-            withCheckbox
+                    : 0
-            className={{
+                }
-              containerClassName: cn('p-3', {
+                totalItems={
-                'w-full mb-20':
+                  isResponseSuccess(projectFlocks)
-                  isResponseSuccess(projectFlocks) &&
+                    ? projectFlocks?.meta?.total_results
-                  projectFlocks?.data?.length === 0,
+                    : 0
-              }),
+                }
-              headerColumnClassName: 'text-nowrap',
+                onPageChange={(page) => {
-            }}
+                  setPage(page);
-          />
+                }}
+                onPageSizeChange={(pageSize) => {
+                  setPageSize(pageSize);
+                }}
+                isLoading={isLoading}
+                sorting={sorting}
+                setSorting={setSorting}
+                rowSelection={rowSelection}
+                setRowSelection={setRowSelection}
+                enableRowSelection={(row) => {
+                  const projectFlock = row.original;
+                  return (
+                    projectFlock.approval?.step_number === 1 &&
+                    projectFlock.approval?.action !== 'REJECTED'
+                  );
+                }}
+                withCheckbox
+                className={{
+                  containerClassName: cn('p-3 mb-0'),
+                  headerColumnClassName: 'text-nowrap',
+                }}
+              />
+            )}
+          </div>
         </div>
       </div>
 

src/components/pages/production/project-flock/skeleton/ProjectFlockTableSkeleton.tsx

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

src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx

@@ -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>
+        <div className='flex flex-col mb-4'>
-          data={
+          {isLoading ? (
-            isResponseSuccess(transferToLayings) ? transferToLayings?.data : []
+            <div className='w-full flex flex-row justify-center items-center p-4'>
-          }
+              <span className='loading loading-spinner loading-xl' />
-          columns={transferToLayingsColumns}
+            </div>
-          pageSize={tableFilterState.pageSize}
+          ) : !isResponseSuccess(transferToLayings) ||
-          page={
+            transferToLayings.data?.length === 0 ? (
-            isResponseSuccess(transferToLayings)
+            <div className='p-3'>
-              ? transferToLayings?.meta?.page
+              <TransferToLayingTableSkeleton
-              : 0
+                columns={transferToLayingsColumns}
-          }
+                icon={
-          totalItems={
+                  <Icon
-            isResponseSuccess(transferToLayings)
+                    icon='heroicons:document-text'
-              ? transferToLayings?.meta?.total_results
+                    className='text-white'
-              : 0
+                    width={20}
-          }
+                    height={20}
-          onPageChange={setPage}
+                  />
-          onPageSizeChange={setPageSize}
+                }
-          isLoading={isLoading}
+              />
-          sorting={sorting}
+            </div>
-          setSorting={setSorting}
+          ) : (
-          rowSelection={rowSelection}
+            <Table<TransferToLaying>
-          setRowSelection={setRowSelection}
+              data={
-          enableRowSelection={tableEnableRowSelectionHandler}
+                isResponseSuccess(transferToLayings)
-          withCheckbox
+                  ? transferToLayings?.data
-          className={{
+                  : []
-            containerClassName: cn('p-3', {
+              }
-              'w-full mb-20':
+              columns={transferToLayingsColumns}
-                isResponseSuccess(transferToLayings) &&
+              pageSize={tableFilterState.pageSize}
-                transferToLayings?.data?.length === 0,
+              page={
-            }),
+                isResponseSuccess(transferToLayings)
-            headerColumnClassName: 'text-nowrap',
+                  ? 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

src/components/pages/production/transfer-to-laying/skeleton/TransferToLayingTableSkeleton.tsx

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