Use scroll left instead of intersection observer (#3522)

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

@@ -1,22 +1,20 @@
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
-import { useInView } from 'react-intersection-observer';
+import { useRecoilValue } from 'recoil';
 
 import { RecordTableRefContext } from '@/object-record/record-table/contexts/RecordTableRefContext';
-import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
 
-export const RecordTableFirstColumnScrollObserver = () => {
+export const RecordTableFirstColumnScrollEffect = () => {
-  const scrollWrapperRef = useContext(ScrollWrapperContext);
   const recordTableRef = useContext(RecordTableRefContext);
 
-  const { ref: elementRef } = useInView({
+  const scrollLeft = useRecoilValue(scrollLeftState);
-    root: scrollWrapperRef.current,
-    onChange: (inView) => {
-      recordTableRef.current?.classList.toggle(
-        'freeze-first-columns-shadow',
-        !inView,
-      );
-    },
-  });
 
-  return <div ref={elementRef}></div>;
+  useEffect(() => {
+    recordTableRef.current?.classList.toggle(
+      'freeze-first-columns-shadow',
+      scrollLeft > 0,
+    );
+  }, [scrollLeft, recordTableRef]);
+
+  return <></>;
 };

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

@@ -6,7 +6,7 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { RecordTable } from '@/object-record/record-table/components/RecordTable';
-import { RecordTableFirstColumnScrollObserver } from '@/object-record/record-table/components/RecordTableFirstColumnScrollObserver';
+import { RecordTableFirstColumnScrollEffect } from '@/object-record/record-table/components/RecordTableFirstColumnScrollObserver';
 import { RecordTableRefContextWrapper } from '@/object-record/record-table/components/RecordTableRefContext';
 import { EntityDeleteContext } from '@/object-record/record-table/contexts/EntityDeleteHookContext';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
@@ -113,7 +113,7 @@ export const RecordTableWithWrappers = ({
     <EntityDeleteContext.Provider value={deleteOneRecord}>
       <ScrollWrapper>
         <RecordTableRefContextWrapper>
-          <RecordTableFirstColumnScrollObserver />
+          <RecordTableFirstColumnScrollEffect />
           <RecordUpdateContext.Provider value={updateRecordMutation}>
             <StyledTableWithHeader>
               <StyledTableContainer>

packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useListenScroll.ts

@@ -2,6 +2,9 @@ import { useEffect } from 'react';
 import debounce from 'lodash.debounce';
 import { useRecoilCallback } from 'recoil';
 
+import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
+import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
+
 import { isScrollingState } from '../states/isScrollingState';
 
 export const useListenScroll = <T extends Element>({
@@ -11,14 +14,20 @@ export const useListenScroll = <T extends Element>({
 }) => {
   const hideScrollBarsCallback = useRecoilCallback(({ snapshot }) => () => {
     const isScrolling = snapshot.getLoadable(isScrollingState).getValue();
+
     if (!isScrolling) {
       scrollableRef.current?.classList.remove('scrolling');
     }
   });
 
-  const handleScrollStart = useRecoilCallback(({ set }) => () => {
+  const handleScrollStart = useRecoilCallback(({ set }) => (event: Event) => {
     set(isScrollingState, true);
     scrollableRef.current?.classList.add('scrolling');
+
+    const target = event.target as HTMLElement;
+
+    set(scrollTopState, target.scrollTop);
+    set(scrollLeftState, target.scrollLeft);
   });
 
   const handleScrollEnd = useRecoilCallback(({ set }) => () => {

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollLeftState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const scrollLeftState = atom<number>({
+  key: 'scroll/scrollLeftState',
+  default: 0,
+});

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollTopState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const scrollTopState = atom<number>({
+  key: 'scroll/scrollTopState',
+  default: 0,
+});