Fix table virtualization data load < 120 records (#15203)

This PR fixes two bugs : 
- Data loading not working between 60 and 120 records on an object
- Table not refreshing when creating a record in an empty table.

Fixes https://github.com/twentyhq/twenty/issues/15196

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

@@ -14,6 +14,7 @@ import { recordTableWidthComponentState } from '@/object-record/record-table/sta
 import { resizedFieldMetadataIdComponentState } from '@/object-record/record-table/states/resizedFieldMetadataIdComponentState';
 import { resizeFieldOffsetComponentState } from '@/object-record/record-table/states/resizeFieldOffsetComponentState';
 import { computeVisibleRecordFieldsWidthOnTable } from '@/object-record/record-table/utils/computeVisibleRecordFieldsWidthOnTable';
+import { RecordTableVirtualizedDataChangedEffect } from '@/object-record/record-table/virtualization/components/RecordTableVirtualizedDataChangedEffect';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';
@@ -94,6 +95,7 @@ export const RecordTableEmpty = ({ tableBodyRef }: RecordTableEmptyProps) => {
       <RecordTableEmptyState />
       <RecordTableColumnWidthEffect />
       <RecordTableWidthEffect />
+      <RecordTableVirtualizedDataChangedEffect />
     </StyledEmptyStateContainer>
   );
 };

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

@@ -11,17 +11,30 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 
+const StyledDebugRow = styled.div`
+  position: absolute;
+  left: 250px;
+  top: ${({ theme }) => theme.spacing(1.25)};
+  z-index: 20;
+  color: ${({ theme }) => theme.font.color.primary};
+  background-color: ${({ theme }) => theme.adaptiveColors.gray1};
+  border: 1px solid ${({ theme }) => theme.adaptiveColors.blue4};
+  padding: ${({ theme }) => theme.spacing(0.5)};
+  display: flex;
+  max-height: ${({ theme }) => theme.spacing(4)};
+
+  overflow: hidden;
+`;
+
 const StyledDebugColumn = styled.div<{ width: number }>`
-  height: 25px;
-  max-height: 25px;
   min-width: ${({ width }) => width}px;
   max-width: ${({ width }) => width}px;
-  overflow: scroll;
+  overflow: hidden;
 
   display: flex;
   text-wrap-mode: nowrap;
-  padding-right: 2px;
-  padding-left: 2px;
+  padding-right: ${({ theme }) => theme.spacing(0.5)};
+  padding-left: ${({ theme }) => theme.spacing(0.5)};
 `;
 
 type RecordTableRowVirtualizedDebugRowHelperProps = {
@@ -62,21 +75,7 @@ export const RecordTableRowVirtualizedDebugRowHelper = ({
   const position = record?.position;
 
   return (
-    <div
-      style={{
-        position: 'absolute',
-        left: 250,
-        top: 5,
-        zIndex: 20,
-        color: 'darkblue',
-        backgroundColor: 'white',
-        border: '1px solid blue',
-        padding: 2,
-        display: 'flex',
-        maxHeight: 16,
-        overflow: 'clip',
-      }}
-    >
+    <StyledDebugRow>
       <StyledDebugColumn width={70}>virtual :{virtualIndex}</StyledDebugColumn>
       <StyledDebugColumn width={70}>real :{realIndex}</StyledDebugColumn>
       <StyledDebugColumn width={100}>pos :{position}</StyledDebugColumn>
@@ -91,6 +90,6 @@ export const RecordTableRowVirtualizedDebugRowHelper = ({
         id:
         {recordId}
       </StyledDebugColumn>
-    </div>
+    </StyledDebugRow>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/virtualization/hooks/useResetNumberOfRecordsToVirtualize.ts

@@ -1,44 +0,0 @@
-import { NUMBER_OF_VIRTUALIZED_ROWS } from '@/object-record/record-table/virtualization/constants/NumberOfVirtualizedRows';
-import { totalNumberOfRecordsToVirtualizeComponentState } from '@/object-record/record-table/virtualization/states/totalNumberOfRecordsToVirtualizeComponentState';
-import { type ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
-import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
-import { useRecoilCallback } from 'recoil';
-
-export const useResetNumberOfRecordsToVirtualize = () => {
-  const totalNumberOfRecordsToVirtualizeCallbackState =
-    useRecoilComponentCallbackState(
-      totalNumberOfRecordsToVirtualizeComponentState,
-    );
-
-  const resetNumberOfRecordsToVirtualize = useRecoilCallback(
-    ({ snapshot, set }) =>
-      ({
-        records,
-        totalCount,
-      }: {
-        records: ObjectRecord[];
-        totalCount: number;
-      }) => {
-        const totalNumberOfRecordsToVirtualize = getSnapshotValue(
-          snapshot,
-          totalNumberOfRecordsToVirtualizeCallbackState,
-        );
-
-        if (totalCount > NUMBER_OF_VIRTUALIZED_ROWS) {
-          if (totalNumberOfRecordsToVirtualize !== totalCount) {
-            set(totalNumberOfRecordsToVirtualizeCallbackState, totalCount);
-          }
-        } else {
-          if (totalNumberOfRecordsToVirtualize !== records.length) {
-            set(totalNumberOfRecordsToVirtualizeCallbackState, records.length);
-          }
-        }
-      },
-    [totalNumberOfRecordsToVirtualizeCallbackState],
-  );
-
-  return {
-    resetNumberOfRecordsToVirtualize,
-  };
-};

packages/twenty-front/src/modules/object-record/record-table/virtualization/hooks/useTriggerInitialRecordTableDataLoad.ts

@@ -11,7 +11,7 @@ import { isRecordTableScrolledVerticallyComponentState } from '@/object-record/r
 import { updateRecordTableCSSVariable } from '@/object-record/record-table/utils/updateRecordTableCSSVariable';
 import { useLoadRecordsToVirtualRows } from '@/object-record/record-table/virtualization/hooks/useLoadRecordsToVirtualRows';
 import { useReapplyRowSelection } from '@/object-record/record-table/virtualization/hooks/useReapplyRowSelection';
-import { useResetNumberOfRecordsToVirtualize } from '@/object-record/record-table/virtualization/hooks/useResetNumberOfRecordsToVirtualize';
+
 import { useResetTableFocuses } from '@/object-record/record-table/virtualization/hooks/useResetTableFocuses';
 import { useResetVirtualizedRowTreadmill } from '@/object-record/record-table/virtualization/hooks/useResetVirtualizedRowTreadmill';
 import { dataLoadingStatusByRealIndexComponentFamilyState } from '@/object-record/record-table/virtualization/states/dataLoadingStatusByRealIndexComponentFamilyState';
@@ -21,6 +21,7 @@ import { lastRealIndexSetComponentState } from '@/object-record/record-table/vir
 import { lastScrollPositionComponentState } from '@/object-record/record-table/virtualization/states/lastScrollPositionComponentState';
 import { recordIdByRealIndexComponentFamilyState } from '@/object-record/record-table/virtualization/states/recordIdByRealIndexComponentFamilyState';
 import { scrollAtRealIndexComponentState } from '@/object-record/record-table/virtualization/states/scrollAtRealIndexComponentState';
+import { totalNumberOfRecordsToVirtualizeComponentState } from '@/object-record/record-table/virtualization/states/totalNumberOfRecordsToVirtualizeComponentState';
 import { type ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { SIGN_IN_BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/SignInBackgroundMockCompanies';
 import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
@@ -88,8 +89,6 @@ export const useTriggerInitialRecordTableDataLoad = () => {
   const { scrollTableToPosition } = useScrollTableToPosition();
 
   const { resetVirtualizedRowTreadmill } = useResetVirtualizedRowTreadmill();
-  const { resetNumberOfRecordsToVirtualize } =
-    useResetNumberOfRecordsToVirtualize();
 
   const { resetTableFocuses } = useResetTableFocuses(recordTableId);
   const { upsertRecordsInStore } = useUpsertRecordsInStore();
@@ -98,6 +97,11 @@ export const useTriggerInitialRecordTableDataLoad = () => {
 
   const { reapplyRowSelection } = useReapplyRowSelection();
 
+  const totalNumberOfRecordsToVirtualizeCallbackState =
+    useRecoilComponentCallbackState(
+      totalNumberOfRecordsToVirtualizeComponentState,
+    );
+
   const triggerInitialRecordTableDataLoad = useRecoilCallback(
     ({ snapshot, set }) =>
       async () => {
@@ -153,18 +157,17 @@ export const useTriggerInitialRecordTableDataLoad = () => {
               null,
             );
           }
+
           const { records: findManyRecords, totalCount: findManyTotalCount } =
             await findManyRecordsLazy();
+
           records = findManyRecords;
           totalCount = findManyTotalCount;
         }
 
-        if (isDefined(records)) {
-          resetNumberOfRecordsToVirtualize({
-            records,
-            totalCount,
-          });
+        set(totalNumberOfRecordsToVirtualizeCallbackState, totalCount);
 
+        if (isDefined(records)) {
           upsertRecordsInStore(records);
 
           loadRecordsToVirtualRows({
@@ -209,7 +212,7 @@ export const useTriggerInitialRecordTableDataLoad = () => {
       findManyRecordsLazy,
       dataLoadingStatusByRealIndexCallbackState,
       recordIdByRealIndexCallbackState,
-      resetNumberOfRecordsToVirtualize,
+      totalNumberOfRecordsToVirtualizeCallbackState,
       upsertRecordsInStore,
       loadRecordsToVirtualRows,
       reapplyRowSelection,