From c1c23619de32f1e0df9b0610e7b1ce1057b96fc7 Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Tue, 21 Apr 2026 15:06:40 +0700
Subject: [PATCH] =?UTF-8?q?[CLAUDE]=20FE:=20DataTable=20skeleton=20rows=20?=
 =?UTF-8?q?khi=20loading=20(thay=20'=C4=90ang=20t=E1=BA=A3i=E2=80=A6'=20te?=
 =?UTF-8?q?xt=20=C4=91=C6=A1n=20gi=E1=BA=A3n)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe-admin/src/components/DataTable.tsx | 19 +++++++++++--------
 fe-user/src/components/DataTable.tsx  | 19 +++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/fe-admin/src/components/DataTable.tsx b/fe-admin/src/components/DataTable.tsx
index 4b49f37..ddc682f 100644
--- a/fe-admin/src/components/DataTable.tsx
+++ b/fe-admin/src/components/DataTable.tsx
@@ -66,16 +66,19 @@ export function DataTable<T>({
           </tr>
         </thead>
         <tbody>
-          {isLoading && (
-            <tr>
-              <td colSpan={columns.length} className="px-3 py-8 text-center text-slate-500">
-                Đang tải…
-              </td>
-            </tr>
-          )}
+          {isLoading &&
+            Array.from({ length: 5 }).map((_, i) => (
+              <tr key={`sk-${i}`} className="border-t border-slate-100">
+                {columns.map(c => (
+                  <td key={c.key} className="px-3 py-3">
+                    <div className="h-3 animate-pulse rounded bg-slate-100" />
+                  </td>
+                ))}
+              </tr>
+            ))}
           {!isLoading && rows.length === 0 && (
             <tr>
-              <td colSpan={columns.length} className="px-3 py-8 text-center text-slate-500">
+              <td colSpan={columns.length} className="px-3 py-10 text-center text-sm text-slate-400">
                 {empty ?? 'Không có dữ liệu'}
               </td>
             </tr>
diff --git a/fe-user/src/components/DataTable.tsx b/fe-user/src/components/DataTable.tsx
index 4b49f37..ddc682f 100644
--- a/fe-user/src/components/DataTable.tsx
+++ b/fe-user/src/components/DataTable.tsx
@@ -66,16 +66,19 @@ export function DataTable<T>({
           </tr>
         </thead>
         <tbody>
-          {isLoading && (
-            <tr>
-              <td colSpan={columns.length} className="px-3 py-8 text-center text-slate-500">
-                Đang tải…
-              </td>
-            </tr>
-          )}
+          {isLoading &&
+            Array.from({ length: 5 }).map((_, i) => (
+              <tr key={`sk-${i}`} className="border-t border-slate-100">
+                {columns.map(c => (
+                  <td key={c.key} className="px-3 py-3">
+                    <div className="h-3 animate-pulse rounded bg-slate-100" />
+                  </td>
+                ))}
+              </tr>
+            ))}
           {!isLoading && rows.length === 0 && (
             <tr>
-              <td colSpan={columns.length} className="px-3 py-8 text-center text-slate-500">
+              <td colSpan={columns.length} className="px-3 py-10 text-center text-sm text-slate-400">
                 {empty ?? 'Không có dữ liệu'}
               </td>
             </tr>