Fix terminal repeatedly remounting on input

Vyxal · Nov 11, 2024 · 3da0b9c · 3da0b9c
1 parent bd8c908
commit 3da0b9c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/latest/scripts/ui/Theseus.tsx b/src/latest/scripts/ui/Theseus.tsx
@@ -242,18 +242,18 @@ export function Theseus({ permalink }: TheseusProps) {
                                 >
                                     <VyTerminal
                                         ref={runnerRef}
-                                        onRunningGroupChanged={(group) => {
+                                        onRunningGroupChanged={useCallback((group) => {
                                             if (group != null) {
                                                 setState({ name: "running", group });
                                             } else {
                                                 setState({ name: "idle" });
                                             }
-                                        }}
-                                        onReady={() => {
+                                        }, [])}
+                                        onReady={useCallback(() => {
                                             if (autorun) {
                                                 onRunClicked(null);
                                             }
-                                        }}
+                                        }, [autorun, onRunClicked])}
                                     />
                                 </Suspense>
                             </Tab.Pane>

diff --git a/src/latest/scripts/ui/VyTerminal.tsx b/src/latest/scripts/ui/VyTerminal.tsx
@@ -45,15 +45,20 @@ const VyTerminal = forwardRef(function VyTerminal({ onRunningGroupChanged, onRea
     });
 
     useEffect(() => {
-        runner.attach(wrapperRef.current!);
         runner.addEventListener("runningGroupChanged", runningGroupChangedCallback);
         runner.addEventListener("ready", () => onReady?.() as void, { once: true });
         return () => {
-            runner.detach();
             runner.removeEventListener("runningGroupChanged", runningGroupChangedCallback);
         };
     }, [onReady, runner, runningGroupChangedCallback]);
 
+    useEffect(() => {
+        runner.attach(wrapperRef.current!);
+        return () => {
+            runner.detach();
+        };
+    }, [runner]);
+
     return <div ref={wrapperRef} className="terminal-wrapper"></div>;
 });
 export default VyTerminal;