Branch batch scroll (#12680)

packages/cli/src/ui/components/shared/Scrollable.test.tsx

@@ -7,7 +7,9 @@
 import { renderWithProviders } from '../../../test-utils/render.js';
 import { Scrollable } from './Scrollable.js';
 import { Text } from 'ink';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import * as ScrollProviderModule from '../../contexts/ScrollProvider.js';
+import { act } from 'react';
 
 vi.mock('ink', async (importOriginal) => {
   const actual = await importOriginal<typeof import('ink')>();
@@ -19,7 +21,22 @@ vi.mock('ink', async (importOriginal) => {
   };
 });
 
+vi.mock('../../hooks/useAnimatedScrollbar.js', () => ({
+  useAnimatedScrollbar: (
+    hasFocus: boolean,
+    scrollBy: (delta: number) => void,
+  ) => ({
+    scrollbarColor: 'white',
+    flashScrollbar: vi.fn(),
+    scrollByWithAnimation: scrollBy,
+  }),
+}));
+
 describe('<Scrollable />', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
   it('renders children', () => {
     const { lastFrame } = renderWithProviders(
       <Scrollable hasFocus={false} height={5}>
@@ -52,4 +69,52 @@ describe('<Scrollable />', () => {
     );
     expect(lastFrame()).toMatchSnapshot();
   });
+
+  it('updates scroll position correctly when scrollBy is called multiple times in the same tick', () => {
+    let capturedEntry: ScrollProviderModule.ScrollableEntry | undefined;
+    vi.spyOn(ScrollProviderModule, 'useScrollable').mockImplementation(
+      (entry, isActive) => {
+        if (isActive) {
+          capturedEntry = entry as ScrollProviderModule.ScrollableEntry;
+        }
+      },
+    );
+
+    renderWithProviders(
+      <Scrollable hasFocus={true} height={5}>
+        <Text>Line 1</Text>
+        <Text>Line 2</Text>
+        <Text>Line 3</Text>
+        <Text>Line 4</Text>
+        <Text>Line 5</Text>
+        <Text>Line 6</Text>
+        <Text>Line 7</Text>
+        <Text>Line 8</Text>
+        <Text>Line 9</Text>
+        <Text>Line 10</Text>
+      </Scrollable>,
+    );
+
+    expect(capturedEntry).toBeDefined();
+
+    if (!capturedEntry) {
+      throw new Error('capturedEntry is undefined');
+    }
+
+    // Initial state (starts at bottom because of auto-scroll logic)
+    expect(capturedEntry.getScrollState().scrollTop).toBe(5);
+
+    // Call scrollBy multiple times (upwards) in the same tick
+    act(() => {
+      capturedEntry!.scrollBy(-1);
+      capturedEntry!.scrollBy(-1);
+    });
+    // Should have moved up by 2
+    expect(capturedEntry.getScrollState().scrollTop).toBe(3);
+
+    act(() => {
+      capturedEntry!.scrollBy(-2);
+    });
+    expect(capturedEntry.getScrollState().scrollTop).toBe(1);
+  });
 });

packages/cli/src/ui/components/shared/Scrollable.tsx

@@ -16,6 +16,7 @@ import { Box, getInnerHeight, getScrollHeight, type DOMElement } from 'ink';
 import { useKeypress, type Key } from '../../hooks/useKeypress.js';
 import { useScrollable } from '../../contexts/ScrollProvider.js';
 import { useAnimatedScrollbar } from '../../hooks/useAnimatedScrollbar.js';
+import { useBatchedScroll } from '../../hooks/useBatchedScroll.js';
 
 interface ScrollableProps {
   children?: React.ReactNode;
@@ -81,17 +82,20 @@ export const Scrollable: React.FC<ScrollableProps> = ({
     childrenCountRef.current = childCountCurrent;
   });
 
+  const { getScrollTop, setPendingScrollTop } = useBatchedScroll(scrollTop);
+
   const scrollBy = useCallback(
     (delta: number) => {
       const { scrollHeight, innerHeight } = sizeRef.current;
-      setScrollTop((prev: number) =>
-        Math.min(
-          Math.max(0, prev + delta),
-          Math.max(0, scrollHeight - innerHeight),
-        ),
+      const current = getScrollTop();
+      const next = Math.min(
+        Math.max(0, current + delta),
+        Math.max(0, scrollHeight - innerHeight),
       );
+      setPendingScrollTop(next);
+      setScrollTop(next);
     },
-    [sizeRef],
+    [sizeRef, getScrollTop, setPendingScrollTop],
   );
 
   const { scrollbarColor, flashScrollbar, scrollByWithAnimation } =
@@ -113,11 +117,11 @@ export const Scrollable: React.FC<ScrollableProps> = ({
 
   const getScrollState = useCallback(
     () => ({
-      scrollTop,
+      scrollTop: getScrollTop(),
       scrollHeight: size.scrollHeight,
       innerHeight: size.innerHeight,
     }),
-    [scrollTop, size.scrollHeight, size.innerHeight],
+    [getScrollTop, size.scrollHeight, size.innerHeight],
   );
 
   const hasFocusCallback = useCallback(() => hasFocus, [hasFocus]);

packages/cli/src/ui/components/shared/VirtualizedList.test.tsx

@@ -280,4 +280,48 @@ describe('<VirtualizedList />', () => {
     expect(lastFrame()).toContain('Item 1');
     expect(lastFrame()).toContain('Item 9');
   });
+
+  it('updates scroll position correctly when scrollBy is called multiple times in the same tick', async () => {
+    const ref = createRef<VirtualizedListRef<string>>();
+    const longData = Array.from({ length: 100 }, (_, i) => `Item ${i}`);
+    const itemHeight = 1;
+    const renderItem1px = ({ item }: { item: string }) => (
+      <Box height={itemHeight}>
+        <Text>{item}</Text>
+      </Box>
+    );
+    const keyExtractor = (item: string) => item;
+
+    render(
+      <Box height={10} width={100} borderStyle="round">
+        <VirtualizedList
+          ref={ref}
+          data={longData}
+          renderItem={renderItem1px}
+          keyExtractor={keyExtractor}
+          estimatedItemHeight={() => itemHeight}
+        />
+      </Box>,
+    );
+    await act(async () => {
+      await delay(0);
+    });
+
+    expect(ref.current?.getScrollState().scrollTop).toBe(0);
+
+    await act(async () => {
+      ref.current?.scrollBy(1);
+      ref.current?.scrollBy(1);
+      await delay(0);
+    });
+
+    expect(ref.current?.getScrollState().scrollTop).toBe(2);
+
+    await act(async () => {
+      ref.current?.scrollBy(2);
+      await delay(0);
+    });
+
+    expect(ref.current?.getScrollState().scrollTop).toBe(4);
+  });
 });

packages/cli/src/ui/components/shared/VirtualizedList.tsx

@@ -16,6 +16,7 @@ import {
 } from 'react';
 import type React from 'react';
 import { theme } from '../../semantic-colors.js';
+import { useBatchedScroll } from '../../hooks/useBatchedScroll.js';
 
 import { type DOMElement, measureElement, Box } from 'ink';
 
@@ -363,6 +364,8 @@ function VirtualizedList<T>(
     }
   }
 
+  const { getScrollTop, setPendingScrollTop } = useBatchedScroll(scrollTop);
+
   useImperativeHandle(
     ref,
     () => ({
@@ -370,7 +373,7 @@ function VirtualizedList<T>(
         if (delta < 0) {
           setIsStickingToBottom(false);
         }
-        const currentScrollTop = scrollTop;
+        const currentScrollTop = getScrollTop();
         const newScrollTop = Math.max(
           0,
           Math.min(
@@ -378,6 +381,7 @@ function VirtualizedList<T>(
             currentScrollTop + delta,
           ),
         );
+        setPendingScrollTop(newScrollTop);
         setScrollAnchor(getAnchorForScrollTop(newScrollTop, offsets));
       },
       scrollTo: (offset: number) => {
@@ -386,6 +390,7 @@ function VirtualizedList<T>(
           0,
           Math.min(totalHeight - scrollableContainerHeight, offset),
         );
+        setPendingScrollTop(newScrollTop);
         setScrollAnchor(getAnchorForScrollTop(newScrollTop, offsets));
       },
       scrollToEnd: () => {
@@ -416,6 +421,7 @@ function VirtualizedList<T>(
               offset - viewPosition * scrollableContainerHeight + viewOffset,
             ),
           );
+          setPendingScrollTop(newScrollTop);
           setScrollAnchor(getAnchorForScrollTop(newScrollTop, offsets));
         }
       },
@@ -440,13 +446,14 @@ function VirtualizedList<T>(
                 offset - viewPosition * scrollableContainerHeight + viewOffset,
               ),
             );
+            setPendingScrollTop(newScrollTop);
             setScrollAnchor(getAnchorForScrollTop(newScrollTop, offsets));
           }
         }
       },
       getScrollIndex: () => scrollAnchor.index,
       getScrollState: () => ({
-        scrollTop,
+        scrollTop: getScrollTop(),
         scrollHeight: totalHeight,
         innerHeight: containerHeight,
       }),
@@ -458,7 +465,8 @@ function VirtualizedList<T>(
       getAnchorForScrollTop,
       data,
       scrollableContainerHeight,
-      scrollTop,
+      getScrollTop,
+      setPendingScrollTop,
       containerHeight,
     ],
   );