Fix TableView resize observer loop limit (#5432)

* Fix resize observer loop limit

Author: snowystinger

packages/@react-aria/virtualizer/src/ScrollView.tsx

@@ -38,6 +38,8 @@ interface ScrollViewProps extends HTMLAttributes<HTMLElement> {
   scrollDirection?: 'horizontal' | 'vertical' | 'both'
 }
 
+let isOldReact = React.version.startsWith('16.') || React.version.startsWith('17.');
+
 function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
   let {
     contentSize,
@@ -148,7 +150,25 @@ function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
   useLayoutEffect(() => {
     updateSize();
   }, [updateSize]);
-  useResizeObserver({ref, onResize: updateSize});
+  let raf = useRef<ReturnType<typeof requestAnimationFrame> | null>();
+  let onResize = () => {
+    if (isOldReact) {
+      raf.current ??= requestAnimationFrame(() => {
+        updateSize();
+        raf.current = null;
+      });
+    } else {
+      updateSize();
+    }
+  };
+  useResizeObserver({ref, onResize});
+  useEffect(() => {
+    return () => {
+      if (raf.current) {
+        cancelAnimationFrame(raf.current);
+      }
+    };
+  }, []);
 
   let style: React.CSSProperties = {
     // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.

packages/@react-spectrum/list/test/ListView.test.js

@@ -1426,6 +1426,9 @@ describe('ListView', function () {
       act(() => {
         fireEvent(window, new Event('resize'));
       });
+      act(() => {
+        jest.runAllTimers();
+      });
       await user.tab();
       expect(grid.scrollTop).toBe(0);
 
@@ -1475,6 +1478,9 @@ describe('ListView', function () {
       act(() => {
         fireEvent(window, new Event('resize'));
       });
+      act(() => {
+        jest.runAllTimers();
+      });
       expect(grid.scrollTop).toBe(0);
 
       focusRow(tree, 'Item 1');