fix(docs): add debouncing to math stack exchange example

BearToCode · Nov 6, 2024 · 0a39360 · 0a39360
1 parent 4e920ef
commit 0a39360
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/docs/src/lib/examples/MathStackExchangeExample.svelte b/docs/src/lib/examples/MathStackExchangeExample.svelte
@@ -6,6 +6,7 @@
 
 	import '$lib/styles/math-stack-exchange.scss';
 	import 'katex/dist/katex.min.css';
+	import { debounce } from '$lib/utils';
 
 	const carta = new Carta({
 		sanitizer: false,
@@ -28,12 +29,19 @@
 	});
 
 	export let value = placeholder;
+	let debouncedValue = value;
+
+	const updateValue = debounce((value: string) => {
+		debouncedValue = value;
+	}, 500);
+
+	$: updateValue(value);
 </script>
 
 <div class="math-stack-exchange-container">
 	<MarkdownEditor bind:value mode="tabs" theme="math-stack-exchange" {carta} />
 
-	{#key value}
-		<Markdown theme="math-stack-exchange" {value} {carta} />
+	{#key debouncedValue}
+		<Markdown theme="math-stack-exchange" value={debouncedValue} {carta} />
 	{/key}
 </div>