From 48ccd5fd72b389467394dda37d19f0b8f1244538 Mon Sep 17 00:00:00 2001
From: Jonathan Dobson <jon.m.dobson@gmail.com>
Date: Tue, 12 Aug 2025 15:34:41 -0400
Subject: [PATCH] Jon/sky 5868 max recursion error in app (#3167)

---
 .../AutoResizingTextarea.tsx                     | 16 +---------------
 .../src/routes/workflows/editor/FlowRenderer.tsx | 11 ++++++++++-
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/skyvern-frontend/src/components/AutoResizingTextarea/AutoResizingTextarea.tsx b/skyvern-frontend/src/components/AutoResizingTextarea/AutoResizingTextarea.tsx
index 242eac56..286798fd 100644
--- a/skyvern-frontend/src/components/AutoResizingTextarea/AutoResizingTextarea.tsx
+++ b/skyvern-frontend/src/components/AutoResizingTextarea/AutoResizingTextarea.tsx
@@ -1,12 +1,6 @@
 import { Textarea } from "@/components/ui/textarea";
 import type { ChangeEventHandler, HTMLAttributes } from "react";
-import {
-  forwardRef,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useCallback,
-} from "react";
+import { forwardRef, useEffect, useRef, useCallback } from "react";
 import { cn } from "@/util/utils";
 
 type Props = {
@@ -49,14 +43,6 @@ const AutoResizingTextarea = forwardRef<HTMLTextAreaElement, Props>(
       }
     };
 
-    useLayoutEffect(() => {
-      const textareaElement = getTextarea();
-      if (!textareaElement) {
-        return;
-      }
-      textareaElement.style.height = `${textareaElement.scrollHeight + 2}px`;
-    }, [getTextarea]);
-
     useEffect(() => {
       const textareaElement = getTextarea();
       if (!textareaElement) {
diff --git a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
index 261abf86..86e3c9d4 100644
--- a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
@@ -271,6 +271,7 @@ function FlowRenderer({
   const [debuggableBlockCount, setDebuggableBlockCount] = useState(0);
   const nodesInitialized = useNodesInitialized();
   const [shouldConstrainPan, setShouldConstrainPan] = useState(false);
+  const onNodesChangeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
     if (nodesInitialized) {
@@ -713,7 +714,15 @@ function FlowRenderer({
               ) {
                 workflowChangesStore.setHasChanges(true);
               }
-              onNodesChange(changes);
+
+              // prevent cascading React updates
+              if (onNodesChangeTimeoutRef.current) {
+                clearTimeout(onNodesChangeTimeoutRef.current);
+              }
+
+              onNodesChangeTimeoutRef.current = setTimeout(() => {
+                onNodesChange(changes);
+              }, 0); // defer to next tick
             }}
             onEdgesChange={onEdgesChange}
             nodeTypes={nodeTypes}