From 85615f53f5b40ea20d2a2f084ab6a3f3b4145011 Mon Sep 17 00:00:00 2001
From: Tania Gutierrez <riobuenodevelops@gmail.com>
Date: Mon, 18 Mar 2024 15:51:02 -0400
Subject: [PATCH] fix: Added Row Skeletons with loading table data

---
 app/components/data-table.tsx       | 37 +++++++++++++++++------------
 app/components/ui/skeleton.tsx      | 15 ++++++++++++
 app/routes/file-manager/columns.tsx |  9 +++----
 3 files changed, 42 insertions(+), 19 deletions(-)
 create mode 100644 app/components/ui/skeleton.tsx

diff --git a/app/components/data-table.tsx b/app/components/data-table.tsx
index 0e2d76d..79f9b5b 100644
--- a/app/components/data-table.tsx
+++ b/app/components/data-table.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo} from "react";
 import { BaseRecord } from "@refinedev/core";
 import { useTable } from "@refinedev/react-table";
 import {
@@ -14,6 +14,7 @@ import {
   TableHeader,
   TableRow,
 } from "./ui/table"
+import { Skeleton } from "./ui/skeleton";
 import { DataTablePagination } from "./table-pagination"
 
 interface DataTableProps<TData extends BaseRecord = BaseRecord, TValue = unknown> {
@@ -21,22 +22,31 @@ interface DataTableProps<TData extends BaseRecord = BaseRecord, TValue = unknown
 }
 
 export function DataTable<TData extends BaseRecord, TValue>({
-  columns
+  columns,
 }: DataTableProps<TData, TValue>) {
-  const [hoveredRowId, setHoveredRowId] = useState<string>("");
-
   const table = useTable({
     columns,
-    meta: {
-      hoveredRowId,
-    },
     refineCoreProps: {
       resource: "files"
     }
   })
 
+  const loadingRows = useMemo(() => Array(4).fill({}).map(() => ({
+    getIsSelected: () => false,
+    getVisibleCells: () => columns.map(() => ({
+      column: {
+        columnDef: {
+          cell: <Skeleton className="h-4 w-full bg-primary-1/30" />,
+        }
+      },
+      getContext: () => null
+    })),
+  })), [])
+
+  const rows = table.refineCore.tableQueryResult.isLoading ? loadingRows : table.getRowModel().rows
+
   return (
-    <div className="rounded-lg">
+    <>
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -57,15 +67,12 @@ export function DataTable<TData extends BaseRecord, TValue>({
           ))}
         </TableHeader>
         <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
+          {rows.length ? (
+            rows.map((row) => (
               <TableRow
                 key={row.id}
                 data-state={row.getIsSelected() && "selected"}
-                onMouseEnter={() => {
-                  console.log(hoveredRowId, row.id);
-                  setHoveredRowId(row.id)
-                }}
+                className="group"
               >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}>
@@ -84,6 +91,6 @@ export function DataTable<TData extends BaseRecord, TValue>({
         </TableBody>
       </Table>
       <DataTablePagination table={table} />
-    </div>
+    </>
   )
 }
diff --git a/app/components/ui/skeleton.tsx b/app/components/ui/skeleton.tsx
new file mode 100644
index 0000000..2fcae58
--- /dev/null
+++ b/app/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "~/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/app/routes/file-manager/columns.tsx b/app/routes/file-manager/columns.tsx
index cc4fbc5..b4a1f2b 100644
--- a/app/routes/file-manager/columns.tsx
+++ b/app/routes/file-manager/columns.tsx
@@ -3,6 +3,7 @@ import type { ColumnDef, RowData } from "@tanstack/react-table";
 import { FileIcon, MoreIcon } from "~/components/icons";
 import { Checkbox } from "~/components/ui/checkbox";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "~/components/ui/dropdown-menu";
+import { cn } from "~/utils";
 
 // This type is used to define the shape of our data.
 // You can use a Zod schema here if you want.
@@ -66,12 +67,13 @@ export const columns: ColumnDef<File>[] = [
         accessorKey: "createdOn",
         size: 200,
         header: "Created On",
-        cell: ({ row, table }) => (
+        cell: ({ row }) => (
           <div className="flex items-center justify-between">
             {row.getValue("createdOn")}
-            {(row.getIsSelected() || table.options.meta?.hoveredRowId === row.id)  && (
               <DropdownMenu>
-              <DropdownMenuTrigger>
+              <DropdownMenuTrigger className={
+                cn("hidden group-hover:block data-[state=open]:block", row.getIsSelected() && "block")
+              }>
                 <MoreIcon />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
@@ -88,7 +90,6 @@ export const columns: ColumnDef<File>[] = [
                 </DropdownMenuGroup>
               </DropdownMenuContent>
             </DropdownMenu>
-            )}
           </div>
         )
     }