From 7ea6afdf958cda36d8a8207869ea6066283e0322 Mon Sep 17 00:00:00 2001
From: Classic298 <27028174+Classic298@users.noreply.github.com>
Date: Thu, 26 Feb 2026 22:34:42 +0100
Subject: [PATCH] perf: cache KaTeX module import as singleton across all
 renderer instances (#21880)

* perf: cache KaTeX module import as singleton across all renderer instances

KatexRenderer.svelte dynamically imports katex, mhchem, and the CSS on every component mount. When a message contains multiple math expressions, this triggers redundant module resolution for each one. Move the import promise to a module-level singleton using Svelte's context='module' script block so it loads once and is shared across all KatexRenderer instances.

* Update KatexRenderer.svelte
---
 .../Messages/Markdown/KatexRenderer.svelte    | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/chat/Messages/Markdown/KatexRenderer.svelte b/src/lib/components/chat/Messages/Markdown/KatexRenderer.svelte
index d28edb224f..f256d48b87 100644
--- a/src/lib/components/chat/Messages/Markdown/KatexRenderer.svelte
+++ b/src/lib/components/chat/Messages/Markdown/KatexRenderer.svelte
@@ -1,5 +1,21 @@
-<script lang="ts">
+<script lang="ts" context="module">
 	import type { renderToString as katexRenderToString } from 'katex';
+
+	// Module-level singleton: load katex once, share across all KatexRenderer instances
+	let katexRenderer: Promise<typeof katexRenderToString> | null = null;
+	function getKatexRenderer(): Promise<typeof katexRenderToString> {
+		if (!katexRenderer) {
+			katexRenderer = Promise.all([
+				import('katex'),
+				import('katex/contrib/mhchem'),
+				import('katex/dist/katex.min.css')
+			]).then(([katex]) => katex.renderToString);
+		}
+		return katexRenderer;
+	}
+</script>
+
+<script lang="ts">
 	import { onMount } from 'svelte';
 
 	export let content: string;
@@ -8,15 +24,11 @@
 	let renderToString: typeof katexRenderToString | null = null;
 
 	onMount(async () => {
-		const [katex] = await Promise.all([
-			import('katex'),
-			import('katex/contrib/mhchem'),
-			import('katex/dist/katex.min.css')
-		]);
-		renderToString = katex.renderToString;
+		renderToString = await getKatexRenderer();
 	});
 </script>
 
 {#if renderToString}
 	{@html renderToString(content, { displayMode, throwOnError: false })}
 {/if}
+