From 0a3936013a0a68a4b7c84b2a83bb55d8b34fb9d2 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Wed, 6 Nov 2024 19:19:28 +0100
Subject: [PATCH] fix(docs): add debouncing to math stack exchange example

---
 .../src/lib/examples/MathStackExchangeExample.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/src/lib/examples/MathStackExchangeExample.svelte b/docs/src/lib/examples/MathStackExchangeExample.svelte
index c6057b1c..6badeae9 100644
--- 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>