From 484ba91b0777042eb848134f206ef3921f968dea Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 25 Feb 2026 13:56:28 -0600
Subject: [PATCH] refac

Co-Authored-By: Algorithm5838 <108630393+Algorithm5838@users.noreply.github.com>
---
 .../components/chat/Messages/Markdown.svelte  | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/chat/Messages/Markdown.svelte b/src/lib/components/chat/Messages/Markdown.svelte
index 729b61e281..81be841f29 100644
--- a/src/lib/components/chat/Messages/Markdown.svelte
+++ b/src/lib/components/chat/Messages/Markdown.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { onDestroy } from 'svelte';
 	import { marked } from 'marked';
 	import { replaceTokens, processResponseContent } from '$lib/utils';
 	import { user } from '$lib/stores';
@@ -34,6 +35,7 @@
 	export let onTaskClick = () => {};
 
 	let tokens = [];
+	let pendingUpdate = null;
 
 	const options = {
 		throwOnError: false,
@@ -53,13 +55,29 @@
 		]
 	});
 
-	$: (async () => {
-		if (content) {
-			tokens = marked.lexer(
-				replaceTokens(processResponseContent(content), model?.name, $user?.name)
-			);
+	const parseTokens = () => {
+		tokens = marked.lexer(
+			replaceTokens(processResponseContent(content), model?.name, $user?.name)
+		);
+	};
+
+	// Throttle parsing to once per animation frame while streaming
+	$: if (content) {
+		if (done) {
+			cancelAnimationFrame(pendingUpdate);
+			pendingUpdate = null;
+			parseTokens();
+		} else if (!pendingUpdate) {
+			pendingUpdate = requestAnimationFrame(() => {
+				pendingUpdate = null;
+				parseTokens();
+			});
 		}
-	})();
+	}
+
+	onDestroy(() => {
+		cancelAnimationFrame(pendingUpdate);
+	});
 </script>
 
 {#key id}