Improve performance on TableBody but disable shadow on first column freeze

packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { RecordTableBody } from '@/object-record/record-table/components/RecordTableBody';
@@ -23,12 +22,9 @@ import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocus
 import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 import { RGBA } from '@/ui/theme/constants/Rgba';
-import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
-import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
 
 const StyledTable = styled.table<{
   freezeFirstColumns?: boolean;
-  freezeHeaders?: boolean;
 }>`
   border-radius: ${({ theme }) => theme.border.radius.sm};
   border-spacing: 0;
@@ -150,8 +146,6 @@ export const RecordTable = ({
   createRecord,
 }: RecordTableProps) => {
   const { scopeId } = useRecordTableStates(recordTableId);
-  const scrollLeft = useRecoilValue(scrollLeftState);
-  const scrollTop = useRecoilValue(scrollTopState);
 
   const { objectMetadataItem } = useObjectMetadataItem({
     objectNameSingular,
@@ -228,11 +222,7 @@ export const RecordTable = ({
             onCellMouseEnter: handleContainerMouseEnter,
           }}
         >
-          <StyledTable
+          <StyledTable className="entity-table-cell">
-            freezeFirstColumns={scrollLeft > 0}
-            freezeHeaders={scrollTop > 0}
-            className="entity-table-cell"
-          >
             <RecordTableHeader createRecord={createRecord} />
             <RecordTableBodyEffect objectNameSingular={objectNameSingular} />
             <RecordTableBody objectNameSingular={objectNameSingular} />

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx

@@ -33,7 +33,9 @@ export const RecordTableRow = ({ recordId, rowIndex }: RecordTableRowProps) => {
   const scrollWrapperRef = useContext(ScrollWrapperContext);
 
   const { ref: elementRef, inView } = useInView({
-    root: scrollWrapperRef.current,
+    root: scrollWrapperRef.current?.querySelector(
+      '[data-overlayscrollbars-viewport="scrollbarHidden"]',
+    ),
     rootMargin: '1000px',
   });
 
@@ -58,21 +60,21 @@ export const RecordTableRow = ({ recordId, rowIndex }: RecordTableRowProps) => {
         <StyledTd>
           <CheckboxCell />
         </StyledTd>
-        {visibleTableColumns.map((column, columnIndex) =>
+        {inView
-          inView ? (
+          ? visibleTableColumns.map((column, columnIndex) => (
-            <RecordTableCellContext.Provider
+              <RecordTableCellContext.Provider
-              value={{
+                value={{
-                columnDefinition: column,
+                  columnDefinition: column,
-                columnIndex,
+                  columnIndex,
-              }}
+                }}
-              key={column.fieldMetadataId}
+                key={column.fieldMetadataId}
-            >
+              >
-              <RecordTableCellFieldContextWrapper />
+                <RecordTableCellFieldContextWrapper />
-            </RecordTableCellContext.Provider>
+              </RecordTableCellContext.Provider>
-          ) : (
+            ))
-            <td key={column.fieldMetadataId}></td>
+          : visibleTableColumns.map((column, columnIndex) => (
-          ),
+              <td key={column.fieldMetadataId}></td>
-        )}
+            ))}
         <td></td>
       </tr>
     </RecordTableRowContext.Provider>