Branch batch scroll (#12680)

packages/cli/src/ui/hooks/useBatchedScroll.test.ts

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '../../test-utils/render.js';
+import { useBatchedScroll } from './useBatchedScroll.js';
+
+describe('useBatchedScroll', () => {
+  it('returns initial scrollTop', () => {
+    const { result } = renderHook(() => useBatchedScroll(10));
+    expect(result.current.getScrollTop()).toBe(10);
+  });
+
+  it('returns updated scrollTop from props', () => {
+    let currentScrollTop = 10;
+    const { result, rerender } = renderHook(() =>
+      useBatchedScroll(currentScrollTop),
+    );
+
+    expect(result.current.getScrollTop()).toBe(10);
+
+    currentScrollTop = 100;
+    rerender();
+
+    expect(result.current.getScrollTop()).toBe(100);
+  });
+
+  it('returns pending scrollTop when set', () => {
+    const { result } = renderHook(() => useBatchedScroll(10));
+
+    result.current.setPendingScrollTop(50);
+    expect(result.current.getScrollTop()).toBe(50);
+  });
+
+  it('overwrites pending scrollTop with subsequent sets before render', () => {
+    const { result } = renderHook(() => useBatchedScroll(10));
+
+    result.current.setPendingScrollTop(50);
+    result.current.setPendingScrollTop(75);
+    expect(result.current.getScrollTop()).toBe(75);
+  });
+
+  it('resets pending scrollTop after rerender', () => {
+    let currentScrollTop = 10;
+    const { result, rerender } = renderHook(() =>
+      useBatchedScroll(currentScrollTop),
+    );
+
+    result.current.setPendingScrollTop(50);
+    expect(result.current.getScrollTop()).toBe(50);
+
+    // Rerender with new prop
+    currentScrollTop = 100;
+    rerender();
+
+    // Should now be the new prop value, pending should be cleared
+    expect(result.current.getScrollTop()).toBe(100);
+  });
+
+  it('resets pending scrollTop after rerender even if prop is same', () => {
+    const { result, rerender } = renderHook(() => useBatchedScroll(10));
+
+    result.current.setPendingScrollTop(50);
+    expect(result.current.getScrollTop()).toBe(50);
+
+    // Rerender with same prop
+    rerender();
+
+    // Pending should still be cleared because useEffect runs after every render
+    expect(result.current.getScrollTop()).toBe(10);
+  });
+
+  it('maintains stable function references', () => {
+    const { result, rerender } = renderHook(() => useBatchedScroll(10));
+    const initialGetScrollTop = result.current.getScrollTop;
+    const initialSetPendingScrollTop = result.current.setPendingScrollTop;
+
+    rerender();
+
+    expect(result.current.getScrollTop).toBe(initialGetScrollTop);
+    expect(result.current.setPendingScrollTop).toBe(initialSetPendingScrollTop);
+  });
+});

packages/cli/src/ui/hooks/useBatchedScroll.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useRef, useEffect, useCallback } from 'react';
+
+/**
+ * A hook to manage batched scroll state updates.
+ * It allows multiple scroll operations within the same tick to accumulate
+ * by keeping track of a 'pending' state that resets after render.
+ */
+export function useBatchedScroll(currentScrollTop: number) {
+  const pendingScrollTopRef = useRef<number | null>(null);
+  // We use a ref for currentScrollTop to allow getScrollTop to be stable
+  // and not depend on the currentScrollTop value directly in its dependency array.
+  const currentScrollTopRef = useRef(currentScrollTop);
+
+  useEffect(() => {
+    currentScrollTopRef.current = currentScrollTop;
+    pendingScrollTopRef.current = null;
+  });
+
+  const getScrollTop = useCallback(
+    () => pendingScrollTopRef.current ?? currentScrollTopRef.current,
+    [],
+  );
+
+  const setPendingScrollTop = useCallback((newScrollTop: number) => {
+    pendingScrollTopRef.current = newScrollTop;
+  }, []);
+
+  return { getScrollTop, setPendingScrollTop };
+}