From 749b7d6f1a9359624c235be3419a6c6140da0e94 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 2 Mar 2026 11:34:27 +0700
Subject: [PATCH] refactor(FE): Refactor UniformityTable to improve loading and
 empty states

---
 .../production/uniformity/UniformityTable.tsx | 78 ++++++++++++-------
 .../skeleton/UniformityTableSkeleton.tsx      | 53 +++++++------
 2 files changed, 78 insertions(+), 53 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index c420ec6c..71bd3901 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -1010,35 +1010,55 @@ const UniformityTable = () => {
         </section>
       </div>
 
-      <Table<Uniformity>
-        data={isResponseSuccess(uniformities) ? uniformities?.data : []}
-        columns={uniformityColumns}
-        pageSize={tableFilterState.pageSize}
-        page={isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0}
-        totalItems={
-          isResponseSuccess(uniformities)
-            ? uniformities?.meta?.total_results
-            : 0
-        }
-        onPageChange={setPage}
-        isLoading={isLoading}
-        sorting={sorting}
-        setSorting={setSorting}
-        rowSelection={rowSelection}
-        setRowSelection={setRowSelection}
-        className={{
-          containerClassName: cn('p-3 pt-0', {
-            'mb-20':
-              isResponseSuccess(uniformities) &&
-              uniformities?.data?.length === 0,
-          }),
-          headerColumnClassName:
-            'first:pl-3 first:pr-0 xl:first:pl-3 py-3 text-nowrap',
-          bodyColumnClassName:
-            'first:pl-3 first:pr-0 xl:first:pl-3 py-3 text-nowrap',
-        }}
-        emptyContent={<UniformityTableSkeleton />}
-      />
+      <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(uniformities) ||
+          uniformities.data?.length === 0 ? (
+          <div className='p-3 pt-0'>
+            <UniformityTableSkeleton
+              columns={uniformityColumns}
+              icon={
+                <Icon
+                  icon='heroicons:document-text'
+                  className='text-white'
+                  width={20}
+                  height={20}
+                />
+              }
+            />
+          </div>
+        ) : (
+          <Table<Uniformity>
+            data={isResponseSuccess(uniformities) ? uniformities?.data : []}
+            columns={uniformityColumns}
+            pageSize={tableFilterState.pageSize}
+            page={
+              isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0
+            }
+            totalItems={
+              isResponseSuccess(uniformities)
+                ? uniformities?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoading}
+            sorting={sorting}
+            setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            className={{
+              containerClassName: cn('p-3 pt-0 mb-0'),
+              headerColumnClassName:
+                'first:pl-3 first:pr-0 xl:first:pl-3 py-3 text-nowrap',
+              bodyColumnClassName:
+                'first:pl-3 first:pr-0 xl:first:pl-3 py-3 text-nowrap',
+            }}
+          />
+        )}
+      </div>
 
       <ConfirmationModal
         ref={successModal.ref}
diff --git a/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
index e1bbd4a9..b00b4db5 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
@@ -1,30 +1,35 @@
-import { Icon } from '@iconify/react';
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { Uniformity } from '@/types/api/production/uniformity';
+import { ColumnDef } from '@tanstack/react-table';
 
-const UniformityTableSkeleton = () => {
+const UniformityTableSkeleton = ({
+  columns,
+  icon,
+  title = 'No Data Available',
+  subtitle = 'There is no uniformity data displayed. Enter uniformity check data to get started.',
+}: {
+  columns: ColumnDef<Uniformity>[];
+  icon: React.ReactNode;
+  title?: string;
+  subtitle?: string;
+}) => {
   return (
-    <div className='flex flex-col items-center justify-center my-20'>
-      {/* Document icon */}
-      <div className='mb-2'>
-        <div className='w-12.5 h-12.5 bg-(--main-color-base-100,#FFFFFF) border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
-          <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
-            <Icon
-              icon='heroicons:document-text'
-              className='text-white'
-              width={20}
-              height={20}
-            />
-          </div>
-        </div>
+    <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>
-
-      {/* Empty state text */}
-      <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
-        No Data Available
-      </h3>
-      <p className='text-base-content/50 text-xs text-center max-w-xs'>
-        There is no uniformity data displayed. Enter uniformity check data to
-        get started.
-      </p>
     </div>
   );
 };