From 7d90a776f9ccbd37d08aacd916758e1413beaaa7 Mon Sep 17 00:00:00 2001
From: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Date: Tue, 18 Jun 2024 14:27:25 +0000
Subject: [PATCH] Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
---
 .../components/RecordTableBodyLoading.tsx     | 19 ++++++++++++++-----
 .../components/RecordTableRow.tsx             |  4 ++--
 .../components/RecordTableCellLoading.tsx     |  7 ++++---
 .../RecordTableCellSkeletonLoader.tsx         |  6 +++---
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx
index 92e68ab1d83a..b609e713eefe 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx
@@ -1,6 +1,11 @@
 import { useRecoilValue } from 'recoil';
 
 import { CheckboxCell } from '@/object-record/record-table/components/CheckboxCell';
+import { GripCell } from '@/object-record/record-table/components/GripCell';
+import {
+  StyledTd,
+  StyledTr,
+} from '@/object-record/record-table/components/RecordTableRow';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { RecordTableCellLoading } from '@/object-record/record-table/record-table-cell/components/RecordTableCellLoading';
 
@@ -12,22 +17,26 @@ export const RecordTableBodyLoading = () => {
   return (
     <tbody>
       {Array.from({ length: 8 }).map((_, rowIndex) => (
-        <tr
+        <StyledTr
+          isDragging={false}
           data-testid={`row-id-${rowIndex}`}
           data-selectable-id={`row-id-${rowIndex}`}
         >
-          <td>
+          <StyledTd data-select-disable>
+            <GripCell isDragging={false} />
+          </StyledTd>
+          <StyledTd>
             <CheckboxCell />
-          </td>
+          </StyledTd>
           {visibleTableColumns.map((column) => (
             <RecordTableCellLoading
               key={column.fieldMetadataId}
               skeletonWidth={
-                skeletonColumnsWithSmallWidth.includes(column.label) ? 108 : 132
+                skeletonColumnsWithSmallWidth.includes(column.label) ? 108 : 139
               }
             />
           ))}
-        </tr>
+        </StyledTr>
       ))}
     </tbody>
   );
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx
index 5ec7e8ff4269..7fc7160e0b74 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx
@@ -23,12 +23,12 @@ type RecordTableRowProps = {
   isPendingRow?: boolean;
 };
 
-const StyledTd = styled.td`
+export const StyledTd = styled.td`
   position: relative;
   user-select: none;
 `;
 
-const StyledTr = styled.tr<{ isDragging: boolean }>`
+export const StyledTr = styled.tr<{ isDragging: boolean }>`
   border: 1px solid transparent;
   transition: border-left-color 0.2s ease-in-out;
 
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx
index 709d83ae6b06..c233e8bc20e6 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx
@@ -1,13 +1,14 @@
+import { StyledTd } from '@/object-record/record-table/components/RecordTableRow';
 import { RecordTableCellSkeletonLoader } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader';
 
 export const RecordTableCellLoading = ({
   skeletonWidth,
 }: {
-  skeletonWidth?: number;
+  skeletonWidth: number;
 }) => {
   return (
-    <td>
+    <StyledTd>
       <RecordTableCellSkeletonLoader skeletonWidth={skeletonWidth} />
-    </td>
+    </StyledTd>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx
index ceae9072716d..c2ae63b225b6 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx
@@ -8,9 +8,9 @@ const StyledSkeletonContainer = styled.div`
 `;
 
 const StyledRecordTableCellLoader = ({
-  skeletonWidth = 132,
+  skeletonWidth,
 }: {
-  skeletonWidth?: number;
+  skeletonWidth: number;
 }) => {
   const theme = useTheme();
   return (
@@ -27,7 +27,7 @@ const StyledRecordTableCellLoader = ({
 export const RecordTableCellSkeletonLoader = ({
   skeletonWidth,
 }: {
-  skeletonWidth?: number;
+  skeletonWidth: number;
 }) => {
   return (
     <StyledSkeletonContainer>