fix: add loading skeletons to DataTable, remove duplicate close in AppDialog

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/ui/AppDialog.tsx

@@ -6,7 +6,6 @@ import {
   DialogFooter,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { X } from "lucide-react";
 import { ReactNode } from "react";
 
 type AppDialogProps = {
@@ -43,16 +42,8 @@ export function AppDialog({
   return (
     <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
       <DialogContent className={MAX_WIDTH_CLASS[maxWidth]}>
-        <DialogHeader className="flex flex-row items-center justify-between pr-6">
+        <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="absolute right-4 top-4 h-6 w-6"
-            onClick={onClose}
-          >
-            <X className="h-4 w-4" />
-          </Button>
         </DialogHeader>
 
         <div className="overflow-y-auto py-4 px-1">{children}</div>

src/components/ui/DataTable.tsx

@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/table";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { ReactNode } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
@@ -77,7 +78,7 @@ function PaginationBar({ page, perPage, total }: { page: number; perPage: number
 }
 
 function DesktopTable<T>({
-  columns, data, keyField, emptyMessage, onRowClick, isEmpty,
+  columns, data, keyField, emptyMessage, onRowClick, isEmpty, loading,
 }: {
   columns: Column<T>[];
   data: T[];
@@ -85,6 +86,7 @@ function DesktopTable<T>({
   emptyMessage: string;
   onRowClick?: (row: T) => void;
   isEmpty: boolean;
+  loading?: boolean;
 }) {
   return (
     <div className="rounded-md border overflow-x-auto">
@@ -103,7 +105,17 @@ function DesktopTable<T>({
           </TableRow>
         </TableHeader>
         <TableBody>
-          {isEmpty ? (
+          {loading ? (
+            Array.from({ length: 5 }).map((_, i) => (
+              <TableRow key={i}>
+                {columns.map((col) => (
+                  <TableCell key={col.id}>
+                    <Skeleton className="h-4 w-full" />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : isEmpty ? (
             <TableRow>
               <TableCell colSpan={columns.length} className="text-center py-12 text-muted-foreground">
                 {emptyMessage}
@@ -149,7 +161,13 @@ export function DataTable<T>({
     return (
       <div>
         <div className="block md:hidden">
-          {isEmpty ? (
+          {loading ? (
+            <div className="flex flex-col gap-3">
+              {Array.from({ length: 3 }).map((_, i) => (
+                <Card key={i}><CardContent className="py-4"><Skeleton className="h-20 w-full" /></CardContent></Card>
+              ))}
+            </div>
+          ) : isEmpty ? (
             <Card>
               <CardContent className="py-12 text-center text-muted-foreground">
                 {emptyMessage}
@@ -168,7 +186,7 @@ export function DataTable<T>({
           <DesktopTable
             columns={columns} data={data} keyField={keyField}
             emptyMessage={emptyMessage} onRowClick={onRowClick}
-            isEmpty={isEmpty}
+            isEmpty={isEmpty} loading={loading}
           />
           {pagination && <PaginationBar {...pagination} />}
         </div>
@@ -181,7 +199,7 @@ export function DataTable<T>({
       <DesktopTable
         columns={columns} data={data} keyField={keyField}
         emptyMessage={emptyMessage} onRowClick={onRowClick}
-        isEmpty={isEmpty}
+        isEmpty={isEmpty} loading={loading}
       />
       {pagination && <PaginationBar {...pagination} />}
     </div>