From 9fe3a00dbac4f6d7e33d750f5cc459bc0849aefc Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Tue, 16 Jun 2026 21:06:56 -0400
Subject: [PATCH] perf(chat): cache KaTeX rendered HTML in reactive statement
 to avoid redundant renders (#25847)

---
 .../chat/Messages/Markdown/KatexRenderer.svelte   | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/Messages/Markdown/KatexRenderer.svelte b/src/lib/components/chat/Messages/Markdown/KatexRenderer.svelte
index 0c9fd6e2c7..cfe7d8b1f7 100644
--- a/src/lib/components/chat/Messages/Markdown/KatexRenderer.svelte
+++ b/src/lib/components/chat/Messages/Markdown/KatexRenderer.svelte
@@ -30,9 +30,20 @@
 	onMount(async () => {
 		renderToString = await getKatexRenderer();
 	});
+
+	// Cache rendered HTML — only re-compute when content, displayMode, or renderToString changes,
+	// not on every parent re-render during streaming
+	let renderedHTML: string = '';
+	$: if (renderToString) {
+		try {
+			renderedHTML = renderToString(content, { displayMode, throwOnError: false });
+		} catch {
+			renderedHTML = content;
+		}
+	}
 </script>
 
-{#if renderToString}
+{#if renderToString && renderedHTML}
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<svelte:element
@@ -43,6 +54,6 @@
 			toast.success($i18n.t('Copied to clipboard'));
 		}}
 	>
-		{@html renderToString(content, { displayMode, throwOnError: false })}
+		{@html renderedHTML}
 	</svelte:element>
 {/if}