fix(ScrollView): don't report empty visible rect when the content suspends

closes #8214

See also: #8215 (comment)

Author: alirezamirian

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

@@ -184,7 +184,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
       // adjusted space. In very specific cases this might result in the scrollbars disappearing
       // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid
       // an infinite loop. This matches how browsers behavior with native CSS grid layout.
-      if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {
+      if (!isTestEnv && (dom.checkVisibility?.() ?? true) && (clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight)) {
         state.width = dom.clientWidth;
         state.height = dom.clientHeight;
         flush(() => {
@@ -198,7 +198,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
 
   // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.
   let lastContentSize = useRef<Size | null>(null);
-  let [update, setUpdate] = useState({});
+  let [update, setUpdate] = useState<{} | false>(false);
   useLayoutEffect(() => {
     if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {
       // React doesn't allow flushSync inside effects, so queue a microtask.
@@ -224,7 +224,9 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
 
   // Will only run in tests, needs to be in separate effect so it is properly run in the next render in strict mode.
   useLayoutEffect(() => {
-    updateSize(fn => fn());
+    if (update) {
+      updateSize(fn => fn());
+    }
   }, [update]);
 
   let onResize = useCallback(() => {

packages/@react-spectrum/list/chromatic/ListView.stories.tsx

@@ -168,3 +168,37 @@ export const Empty = {
   render: TemplateEmptyState,
   name: 'empty state'
 };
+
+export const SuspendedItem = {
+  render: (args) => {
+    return (
+      <React.Suspense fallback="loading...">
+        <div style={{width: 200}}>
+          <ListView {...args}>
+            <Item>
+              <Text>
+                <WithSuspense>Item 1</WithSuspense>
+              </Text>
+            </Item>
+            <Item>Item 2</Item>
+          </ListView>
+        </div>
+      </React.Suspense>
+    );
+  },
+  name: 'suspended item'
+};
+let data: string;
+const promise = new Promise((resolve) => setTimeout(resolve, 500)).then(() => {
+  data = 'data';
+});
+const useData = () => {
+  if (!data) {
+    throw promise;
+  }
+  return data;
+};
+function WithSuspense({children}: { children: React.ReactNode }) {
+  useData();
+  return <>{children}</>;
+}