From 90c087786c0afd1ce25dd5bdeb2650a97c5fca62 Mon Sep 17 00:00:00 2001
From: momo5502 <mauriceheumann@gmail.com>
Date: Sat, 12 Jul 2025 11:18:25 +0200
Subject: [PATCH] Better output window updating

---
 page/src/components/output.tsx | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/page/src/components/output.tsx b/page/src/components/output.tsx
index 04c403a8..1e77f302 100644
--- a/page/src/components/output.tsx
+++ b/page/src/components/output.tsx
@@ -11,10 +11,16 @@ interface OutputState extends ColorState {
   lines: LogLine[];
 }
 
+enum SizeState {
+  Final,
+  Updating,
+}
+
 interface FullOutputState extends OutputState {
   grouper: OutputGrouper;
   height: number;
   width: number;
+  state: SizeState;
 }
 
 interface LogLine {
@@ -173,6 +179,7 @@ export class Output extends React.Component<OutputProps, FullOutputState> {
       grouper: new OutputGrouper(),
       height: 10,
       width: 10,
+      state: SizeState.Final,
     };
 
     this.state.grouper.handler = (lines: string[]) => {
@@ -216,9 +223,29 @@ export class Output extends React.Component<OutputProps, FullOutputState> {
       return;
     }
 
-    this.setState({
-      width: this.outputRef.current.offsetWidth - 1,
-      height: this.outputRef.current.offsetHeight - 1,
+    if (this.state.state == SizeState.Updating) {
+      this.setState({
+        width: this.outputRef.current.offsetWidth - 1,
+        height: this.outputRef.current.offsetHeight - 1,
+        state: SizeState.Final,
+      });
+
+      return;
+    }
+
+    this.setState(
+      {
+        width: 0,
+        height: 0,
+        state: SizeState.Updating,
+      },
+      this.triggerDimensionUpdate.bind(this),
+    );
+  }
+
+  triggerDimensionUpdate() {
+    requestAnimationFrame(() => {
+      this.updateDimensions();
     });
   }