Fix loading flickering on home page

aberonni · Jan 26, 2024 · ad7acb9 · ad7acb9
1 parent 1f2566e
commit ad7acb9
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/src/components/data-table/index.tsx b/src/components/data-table/index.tsx
@@ -112,8 +112,11 @@ export function DataTable<TData, TValue = unknown>({
               Array.from({ length: 5 }).map((_, i) => (
                 <TableRow key={i}>
                   {table.getVisibleFlatColumns().map((col, j) => (
-                    <TableCell key={j}>
-                      <Skeleton className="my-0.5 h-[18px] w-[200px]" />
+                    <TableCell key={j} className="h-[40px]">
+                      <Skeleton
+                        className="h-[18px]"
+                        style={{ width: `${60 + ((i + j) % 3) * 40}px` }}
+                      />
                     </TableCell>
                   ))}
                 </TableRow>
@@ -125,7 +128,7 @@ export function DataTable<TData, TValue = unknown>({
                   data-state={row.getIsSelected() && "selected"}
                 >
                   {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
+                    <TableCell key={cell.id} className="h-[40px]">
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext(),