Refactor according to review

Co-authored-by: v1b3m <[email protected]>
Co-authored-by: Matheus <[email protected]>

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>
   );

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;
 

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>
   );
 };

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>