Branch batch scroll (#12680)

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]);