From 5b74432ee3ccbf03b8d171780cceb086996f7a64 Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Thu, 12 Nov 2020 04:07:08 +0100
Subject: [PATCH] Improve web interface console performance

Calculate the coloring for instance console messages once instead of
every time the instance console is updated.
---
 packages/web_ui/src/components/InstanceViewPage.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/web_ui/src/components/InstanceViewPage.jsx b/packages/web_ui/src/components/InstanceViewPage.jsx
index 5e0057d6..c9686485 100644
--- a/packages/web_ui/src/components/InstanceViewPage.jsx
+++ b/packages/web_ui/src/components/InstanceViewPage.jsx
@@ -106,11 +106,13 @@ function formatOutputColored(output, key) {
 
 function InstanceConsole(props) {
 	let control = useContext(ControlContext);
-	let [lines, setLines] = useState([{ message: "<previous messages are not shown>" }]);
+	let [lines, setLines] = useState([<span key={0}>{"<previous messages are not shown>"}<br/></span>]);
 
 	useEffect(() => {
 		function outputHandler(output) {
-			setLines(currentLines => currentLines.concat([output]));
+			setLines(currentLines => currentLines.concat(
+				[formatOutputColored(output, currentLines.length)]
+			));
 		}
 
 		control.onInstanceOutput(props.id, outputHandler);
@@ -121,7 +123,7 @@ function InstanceConsole(props) {
 
 	return <>
 		<Paragraph code className="instance-console">
-			{lines.map(formatOutputColored)}
+			{lines}
 			<div className="scroll-anchor" />
 		</Paragraph>
 	</>;