From f1227c9dcb9f44e3e13b865767c61710fd956334 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 26 Dec 2025 10:58:27 +0700
Subject: [PATCH] feat(FE-438): Add UniformityTable skeleton for empty state

---
 .../pages/uniformity/UniformityTable.tsx      |  2 ++
 .../skeleton/UniformityTableSkeleton.tsx      | 26 +++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 src/components/pages/uniformity/skeleton/UniformityTableSkeleton.tsx

diff --git a/src/components/pages/uniformity/UniformityTable.tsx b/src/components/pages/uniformity/UniformityTable.tsx
index 65decf22..4ff61785 100644
--- a/src/components/pages/uniformity/UniformityTable.tsx
+++ b/src/components/pages/uniformity/UniformityTable.tsx
@@ -22,6 +22,7 @@ import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import toast from 'react-hot-toast';
 import Card from '@/components/Card';
+import UniformityTableSkeleton from './skeleton/UniformityTableSkeleton';
 
 const statusColorMap: Record<string, string> = {
   APPROVED: 'bg-[#00D39033]',
@@ -414,6 +415,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
             bodyColumnClassName:
               'px-6 py-3 last:flex last:flex-row last:justify-end',
           }}
+          emptyContent={<UniformityTableSkeleton />}
         />
 
         <ConfirmationModal
diff --git a/src/components/pages/uniformity/skeleton/UniformityTableSkeleton.tsx b/src/components/pages/uniformity/skeleton/UniformityTableSkeleton.tsx
new file mode 100644
index 00000000..083b19c2
--- /dev/null
+++ b/src/components/pages/uniformity/skeleton/UniformityTableSkeleton.tsx
@@ -0,0 +1,26 @@
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+
+const UniformityTableSkeleton = () => {
+  return (
+    <div className='flex flex-col items-center justify-center gap-2 my-10 mb-0!'>
+      <div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center'>
+        <Button className='rounded-2xl border border-sky-500 bg-[#0069E0]  text-white'>
+          <Icon
+            icon={'heroicons-outline:chart-bar'}
+            className='text-4xl text-whitd'
+          />
+        </Button>
+      </div>
+      <span className='text-xl font-semibold text-[#18181B80] leading-5'>
+        No Data Available
+      </span>
+      <span className='text-xs font-light text-[#18181B80] leading-4 text-center max-w-xs px-4'>
+        There is no uniformity data displayed. Enter uniformity check data to
+        get started.
+      </span>
+    </div>
+  );
+};
+
+export default UniformityTableSkeleton;