fix: Flicker when scrolling virtualizer in and out of view (adobe#9902)

Author: devongovett

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

@@ -94,7 +94,8 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
     viewportSize: new Size(),
     scrollEndTime: 0,
     scrollTimeout: null as ReturnType<typeof setTimeout> | null,
-    isScrolling: false
+    isScrolling: false,
+    lastVisibleRect: new Rect()
   }).current;
   let {direction} = useLocale();
 
@@ -105,15 +106,19 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
     // their sizes into account for performance reasons. Their scroll positions are accounted for in viewportOffset
     // though (due to getBoundingClientRect). This may result in more rows than absolutely necessary being rendered,
     // but no more than the entire height of the viewport which is good enough for virtualization use cases.
-    let visibleRect = allowsWindowScrolling 
+    let visibleRect = allowsWindowScrolling
       ? new Rect(
         state.viewportOffset.x + state.scrollPosition.x,
         state.viewportOffset.y + state.scrollPosition.y,
         Math.max(0, Math.min(state.size.width - state.viewportOffset.x, state.viewportSize.width)),
         Math.max(0, Math.min(state.size.height - state.viewportOffset.y, state.viewportSize.height))
       )
       : new Rect(state.scrollPosition.x, state.scrollPosition.y, state.size.width, state.size.height);
-    onVisibleRectChange(visibleRect);
+    // Don't emit updates if the visible area is zero and the last emitted area was also zero.
+    if (visibleRect.area > 0 || state.lastVisibleRect.area > 0) {
+      onVisibleRectChange(visibleRect);
+      state.lastVisibleRect = visibleRect;
+    }
   }, [state, allowsWindowScrolling, onVisibleRectChange]);
 
   let [isScrolling, setScrolling] = useState(false);

packages/react-stately/src/layout/ListLayout.ts

@@ -193,8 +193,10 @@ export class ListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> exte
       let rowHeight = (this.rowSize ?? this.estimatedRowSize ?? DEFAULT_HEIGHT) + this.gap;
       // Clone only before mutating
       rect = rect.copy();
-      rect[offsetProperty] = Math.floor(rect[offsetProperty] / rowHeight) * rowHeight;
-      rect[heightProperty] = Math.ceil(rect[heightProperty] / rowHeight) * rowHeight;
+      let offset = Math.floor(rect[offsetProperty] / rowHeight) * rowHeight;
+      let height = rect[heightProperty] + rect[offsetProperty] - offset;
+      rect[offsetProperty] = offset;
+      rect[heightProperty] = Math.ceil(height / rowHeight) * rowHeight;
     }
 
     // If layout hasn't yet been done for the requested rect, union the