Fix table content missing when navigating to previously browsed page (#10188)

We are using useInView to detect if a row should be rendered or not.

# Behavior issue

When browsing an Index page (let's say People), then navigating to
another one (Company), then back to People, the rows were not displayed
anymore. For some reason the inView value was set to false in this case

# Fix
- I have updated the useInView (react-intersection-observer) package but
it did not fix it
- useInView provides a ref. However, I believe this was conflicting with
the draggableRef; cecause we are in a <table> we cannot add additional
containers and are forced to apply both refs to the <tr> (draggableRef +
inViewRef). I believe this was causing the issue. I have added the
inView ref to an empty <td> within the row which is achieving the same
goal without forcing to combine refs

package.json

@@ -166,7 +166,7 @@
     "react-hotkeys-hook": "^4.4.4",
     "react-icons": "^4.12.0",
     "react-imask": "^7.6.0",
-    "react-intersection-observer": "^9.5.2",
+    "react-intersection-observer": "^9.15.1",
     "react-loading-skeleton": "^3.3.1",
     "react-phone-number-input": "^3.3.4",
     "react-responsive": "^9.0.2",

packages/twenty-front/src/modules/debug/components/ApolloDevLogEffect.tsx

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
 import { loadDevMessages, loadErrorMessages } from '@apollo/client/dev';
+import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';

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

@@ -1,10 +1,9 @@
 import { useTheme } from '@emotion/react';
 import { Draggable, DraggableId } from '@hello-pangea/dnd';
-import { forwardRef, ReactNode } from 'react';
+import { ReactNode, forwardRef } from 'react';
 
 import { RecordTableRowDraggableContextProvider } from '@/object-record/record-table/contexts/RecordTableRowDraggableContext';
 import { RecordTableTr } from '@/object-record/record-table/record-table-row/components/RecordTableTr';
-import { combineRefs } from '~/utils/combineRefs';
 
 type RecordTableDraggableTrProps = {
   className?: string;
@@ -16,7 +15,7 @@ type RecordTableDraggableTrProps = {
 };
 
 export const RecordTableDraggableTr = forwardRef<
-  HTMLTableRowElement,
+  HTMLTableCellElement,
   RecordTableDraggableTrProps
 >(
   (
@@ -40,10 +39,7 @@ export const RecordTableDraggableTr = forwardRef<
       >
         {(draggableProvided, draggableSnapshot) => (
           <RecordTableTr
-            ref={combineRefs<HTMLTableRowElement>(
-              ref,
-              draggableProvided.innerRef,
-            )}
+            ref={draggableProvided.innerRef}
             className={className}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...draggableProvided.draggableProps}
@@ -68,6 +64,7 @@ export const RecordTableDraggableTr = forwardRef<
               }}
             >
               {children}
+              <td ref={ref}></td>
             </RecordTableRowDraggableContextProvider>
           </RecordTableTr>
         )}

yarn.lock

@@ -40964,16 +40964,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-intersection-observer@npm:^9.5.2":
-  version: 9.13.0
-  resolution: "react-intersection-observer@npm:9.13.0"
+"react-intersection-observer@npm:^9.15.1":
+  version: 9.15.1
+  resolution: "react-intersection-observer@npm:9.15.1"
   peerDependencies:
-    react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
   peerDependenciesMeta:
     react-dom:
       optional: true
-  checksum: 10c0/7e446b763edc0d9e5642c03c0a151fa6e25fd91c7d004b8af918b0ec9a01f0c252909c13c6fbf95d331e7064bbe1d5668ed788610acab400ce38063d82f9e1b3
+  checksum: 10c0/ac2ce7093aef2d6cc3ec9ddd88b8e3f54a7320d867170433a12014f881400553517b3304c4e7bd7b666a44dbd42e94472e5cffdfa45356c9e17d3a0a1ba02b3a
   languageName: node
   linkType: hard
 
@@ -46289,7 +46289,7 @@ __metadata:
     react-hotkeys-hook: "npm:^4.4.4"
     react-icons: "npm:^4.12.0"
     react-imask: "npm:^7.6.0"
-    react-intersection-observer: "npm:^9.5.2"
+    react-intersection-observer: "npm:^9.15.1"
     react-loading-skeleton: "npm:^3.3.1"
     react-phone-number-input: "npm:^3.3.4"
     react-responsive: "npm:^9.0.2"