feat(FE): Add skeleton components for closing pages

src/components/pages/closing/table/sapronak/OutgoingSapronaksSummaryTable.tsx

@@ -15,6 +15,7 @@ import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ClosingApi } from '@/services/api/closing';
 import { ClosingOutgoingSapronakSummary } from '@/types/api/closing';
+import SapronakClosingSkeleton from '@/components/pages/closing/skeleton/SapronakClosingSkeleton';
 
 interface ClosingOutgoingSapronaksSummaryTableProps {
   projectFlockId: number;
@@ -131,40 +132,52 @@ const ClosingOutgoingSapronaksSummaryTable = ({
         titleClassName='w-full p-0!'
       >
         <div className='w-full p-0'>
-          <Table<ClosingOutgoingSapronakSummary>
-            data={
-              isResponseSuccess(outgoingSapronakSummaries)
-                ? outgoingSapronakSummaries?.data
-                : []
-            }
-            columns={outgoingSapronaksColumns}
-            pageSize={tableFilterState.pageSize}
-            onPageSizeChange={setPageSize}
-            rowOptions={[10, 20, 50, 100]}
-            page={
-              isResponseSuccess(outgoingSapronakSummaries)
-                ? outgoingSapronakSummaries?.meta?.page
-                : 0
-            }
-            totalItems={
-              isResponseSuccess(outgoingSapronakSummaries)
-                ? outgoingSapronakSummaries?.meta?.total_results
-                : 0
-            }
-            onPageChange={setPage}
-            isLoading={isLoadingOutgoingSapronakSummaries}
-            sorting={sorting}
-            setSorting={setSorting}
-            rowSelection={rowSelection}
-            setRowSelection={setRowSelection}
-            className={{
-              containerClassName: cn({
-                'w-full mb-20':
-                  isResponseSuccess(outgoingSapronakSummaries) &&
-                  outgoingSapronakSummaries?.data?.length === 0,
-              }),
-            }}
-          />
+          {isLoadingOutgoingSapronakSummaries ? (
+            <SapronakClosingSkeleton type='outgoing' />
+          ) : isResponseSuccess(outgoingSapronakSummaries) &&
+            outgoingSapronakSummaries.data.length === 0 ? (
+            <SapronakClosingSkeleton
+              type='outgoing'
+              iconName='heroicons:chart-bar'
+              title='Ringkasan Sapronak Keluar Tidak Ditemukan'
+              subtitle='Tidak ada ringkasan sapronak keluar untuk periode ini.'
+            />
+          ) : (
+            <Table<ClosingOutgoingSapronakSummary>
+              data={
+                isResponseSuccess(outgoingSapronakSummaries)
+                  ? outgoingSapronakSummaries?.data
+                  : []
+              }
+              columns={outgoingSapronaksColumns}
+              pageSize={tableFilterState.pageSize}
+              onPageSizeChange={setPageSize}
+              rowOptions={[10, 20, 50, 100]}
+              page={
+                isResponseSuccess(outgoingSapronakSummaries)
+                  ? outgoingSapronakSummaries?.meta?.page
+                  : 0
+              }
+              totalItems={
+                isResponseSuccess(outgoingSapronakSummaries)
+                  ? outgoingSapronakSummaries?.meta?.total_results
+                  : 0
+              }
+              onPageChange={setPage}
+              isLoading={isLoadingOutgoingSapronakSummaries}
+              sorting={sorting}
+              setSorting={setSorting}
+              rowSelection={rowSelection}
+              setRowSelection={setRowSelection}
+              className={{
+                containerClassName: cn({
+                  'w-full mb-20':
+                    isResponseSuccess(outgoingSapronakSummaries) &&
+                    outgoingSapronakSummaries?.data?.length === 0,
+                }),
+              }}
+            />
+          )}
         </div>
       </Collapse>
     </Card>