perf: cache KaTeX module import as singleton across all renderer instances (open-webui#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

Author: Classic298

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}
+