🦣🦣🦣 Table virtualization (#14743)

This big PR implements table virtualization with an offset paging,
allowing a way more fluid UX.

It is a v1 that should be improved in the future with partial data
loading and optimization of the browser display performance of a row.

But with this PR we have the solid enough technical foundation, both
frontend and backend, to get to a smooth table UX.

Fixes and improvements after first successful round of development
(needed to have main clean) :

- [x] Delete should refresh virtualized portion only and reset all table
- [x] Fix add new : top and bottom
- [x] Table empty shouldn’t show when first loading
- [x] Fix d&d
- [x]  Fix sorts
- [x] Fix drag when scrolling after a full virtual page (it throws an
error)
- [x] Si update mais qu’on a un sort ou filter, alors il faut trigger le
refresh
- [x]  Reset scroll position between tables
- [x]  Reset scroll shadows between tables
- [x] Setup d&n for virtual list :
https://github.com/hello-pangea/dnd/blob/main/docs/patterns/virtual-lists.md
- [x]  Full table re-render when entering edit mode
- [x] Clean code and prepare for merge

Fixes https://github.com/twentyhq/core-team-issues/issues/1613 that
contains other bugs to be fixed before merge

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -6,7 +6,9 @@ export const useScrollToPosition = () => {
 
   const scrollToPosition = useCallback(
     (scrollPositionInPx: number) => {
-      scrollWrapperHTMLElement?.scrollTo({ top: scrollPositionInPx });
+      scrollWrapperHTMLElement?.scrollTo({
+        top: scrollPositionInPx,
+      });
     },
     [scrollWrapperHTMLElement],
   );

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

@@ -15,7 +15,16 @@ export const useScrollWrapperHTMLElement = (
   const { element: scrollWrapperHTMLElement } =
     useHTMLElementByIdWhenAvailable(scrollWrapperId);
 
+  const getScrollWrapperElement = () => {
+    const scrollWrapperElement = document.getElementById(scrollWrapperId);
+
+    return {
+      scrollWrapperElement,
+    };
+  };
+
   return {
     scrollWrapperHTMLElement,
+    getScrollWrapperElement,
   };
 };