feat: table virtualization (#1408)

* feat: poc table virtualization

* feat: table virtualization

* feat: add overscan of 15

* fix: increase overscan to 50

* fix: dead code

* fix: debug mode

* feat: styled space

front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx

@@ -1,8 +1,12 @@
-import { useRef } from 'react';
+import { createContext, RefObject, useRef } from 'react';
 import styled from '@emotion/styled';
 
 import { useListenScroll } from '../hooks/useListenScroll';
 
+export const ScrollWrapperContext = createContext<RefObject<HTMLDivElement>>({
+  current: null,
+});
+
 const StyledScrollWrapper = styled.div`
   display: flex;
   height: 100%;
@@ -28,8 +32,10 @@ export function ScrollWrapper({ children, className }: ScrollWrapperProps) {
   });
 
   return (
-    <StyledScrollWrapper ref={scrollableRef} className={className}>
-      {children}
-    </StyledScrollWrapper>
+    <ScrollWrapperContext.Provider value={scrollableRef}>
+      <StyledScrollWrapper ref={scrollableRef} className={className}>
+        {children}
+      </StyledScrollWrapper>
+    </ScrollWrapperContext.Provider>
   );
 }

front/src/modules/ui/utilities/scroll/hooks/useScrollWrapperScopedRef.ts

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+
+import { ScrollWrapperContext } from '../components/ScrollWrapper';
+
+export function useScrollWrapperScopedRef() {
+  const scrollWrapperRef = useContext(ScrollWrapperContext);
+
+  if (!scrollWrapperRef)
+    throw new Error(
+      `Using a scoped ref without a ScrollWrapper : verify that you are using a ScrollWrapper if you intended to do so.`,
+    );
+
+  return scrollWrapperRef;
+}