refactor(FE): Refactor UniformityTable to improve loading and empty

states

src/components/pages/production/uniformity/UniformityTable.tsx

@@ -1010,11 +1010,34 @@ const UniformityTable = () => {
         </section>
       </div>
 
+      <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}
+            page={
+              isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0
+            }
             totalItems={
               isResponseSuccess(uniformities)
                 ? uniformities?.meta?.total_results
@@ -1027,18 +1050,15 @@ const UniformityTable = () => {
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             className={{
-          containerClassName: cn('p-3 pt-0', {
+              containerClassName: cn('p-3 pt-0 mb-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>
 
       <ConfirmationModal
         ref={successModal.ref}

src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx

@@ -1,31 +1,36 @@
-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'>
+    <div className='relative size-full'>
-      {/* Document icon */}
+      <Table
-      <div className='mb-2'>
+        data={[]}
-        <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'>
+        columns={columns}
-          <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]'>
+        isLoading={true}
-            <Icon
+        className={{
-              icon='heroicons:document-text'
+          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-              className='text-white'
+          headerColumnClassName: 'whitespace-nowrap',
-              width={20}
+          containerClassName: 'mb-0 overflow-hidden',
-              height={20}
+          tableWrapperClassName: 'overflow-hidden',
+        }}
       />
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
       </div>
     </div>
-      </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>
   );
 };