Branch batch scroll (#12680)

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