smoother scroll

Author: hate

apps/web/src/features/editor/components/TypingFeedback.tsx

@@ -24,6 +24,7 @@ export function TypingFeedback({
   syntaxThemeId,
 }: TypingFeedbackProps) {
   const activeCursorRef = useRef<HTMLSpanElement>(null);
+  const scrollFrameRef = useRef<number | null>(null);
 
   const lineCount = useMemo(() => {
     let count = 1;
@@ -41,30 +42,46 @@ export function TypingFeedback({
       const container = element.closest('.scrollbar-auto-hide') as HTMLElement;
 
       if (container) {
-        const rect = element.getBoundingClientRect();
-        const containerRect = container.getBoundingClientRect();
-
-        // Only scroll down if cursor is below viewport, never scroll up
-        const buffer = 100; // pixels from bottom before triggering scroll
-        const isBelowView = rect.bottom > containerRect.bottom - buffer;
-
-        if (isBelowView) {
-          // Calculate position to keep cursor visible with buffer from bottom
-          const relativeTop = rect.top - containerRect.top + container.scrollTop;
-          const elementHeight = rect.height;
-          const containerHeight = container.clientHeight;
-
-          // Position cursor at 2/3 down the viewport (not centered, keeps more context above)
-          const targetPosition = containerHeight * 0.66;
-          const scrollTop = relativeTop - targetPosition + (elementHeight / 2);
-
-          // Only scroll if we need to go down
-          if (scrollTop > container.scrollTop) {
-            container.scrollTop = scrollTop;
-          }
+        // Cancel any pending scroll frame
+        if (scrollFrameRef.current !== null) {
+          cancelAnimationFrame(scrollFrameRef.current);
         }
+
+        // Schedule scroll update, but only one at a time
+        scrollFrameRef.current = requestAnimationFrame(() => {
+          scrollFrameRef.current = null;
+
+          const rect = element.getBoundingClientRect();
+          const containerRect = container.getBoundingClientRect();
+
+          // Only scroll down if cursor is below viewport, never scroll up
+          const buffer = 100; // pixels from bottom before triggering scroll
+          const isBelowView = rect.bottom > containerRect.bottom - buffer;
+
+          if (isBelowView) {
+            // Calculate position to keep cursor visible with buffer from bottom
+            const relativeTop = rect.top - containerRect.top + container.scrollTop;
+            const containerHeight = container.clientHeight;
+
+            // Position cursor at 2/3 down the viewport (not centered, keeps more context above)
+            const targetPosition = containerHeight * 0.66;
+            const scrollTop = relativeTop - targetPosition;
+
+            // Only scroll if we need to go down
+            if (scrollTop > container.scrollTop) {
+              container.scrollTop = scrollTop;
+            }
+          }
+        });
       }
     }
+
+    // Cleanup on unmount
+    return () => {
+      if (scrollFrameRef.current !== null) {
+        cancelAnimationFrame(scrollFrameRef.current);
+      }
+    };
   }, [typedLength]);
 
   return (