added debounce argument to updateUrlParam

evidence-dev · Feb 11, 2025 · 3fc393e · 3fc393e
1 parent 85ded9a
commit 3fc393e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 39 deletions.
diff --git a/packages/lib/sdk/src/utils/svelte/useUrlParams.js b/packages/lib/sdk/src/utils/svelte/useUrlParams.js
@@ -36,11 +36,6 @@
 //         }
 //     }
 // }
-
-import { onMount } from 'svelte';
-import { get } from 'svelte/store';
-// @ts-expect-error
-import { page } from '$app/stores';
 // @ts-expect-error
 import { browser } from '$app/environment';
 
@@ -58,30 +53,33 @@ export function hydrateFromUrlParam(key, hydrate) {
 	}
 }
 
+/** @type {ReturnType<typeof setTimeout>} */
+let timeout;
 /**
  * Updates the URL search parameter.
  * @param {string} key
  * @param {string | null} value
  */
-export function updateUrlParam(key, value) {
+export function updateUrlParam(key, value, debounceDelay = null) {
 	if (browser) {
 		const url = new URL(window.location.href);
 
-		// if (!url.searchParams.has(key) && value) {
-		// 	url.searchParams.append(key, value);
-		// } else if (value) {
-		// 	url.searchParams.set(key, value);
-		// } else {
-		// 	url.searchParams.delete(key);
-		// }
+		const updateUrl = () => {
+			if (value !== null) {
+				url.searchParams.set(key, encodeUrlValue(value));
+			} else {
+				url.searchParams.delete(key);
+			}
 
-		if (value !== null) {
-			url.searchParams.set(key, encodeUrlValue(value));
+			history.replaceState(null, '', `?${url.searchParams.toString()}`);
+		};
+
+		if (debounceDelay !== null) {
+			clearTimeout(timeout);
+			timeout = setTimeout(updateUrl, debounceDelay);
 		} else {
-			url.searchParams.delete(key);
+			updateUrl();
 		}
-
-		history.replaceState(null, '', `?${url.searchParams.toString()}`);
 	}
 }
 

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/slider/_Slider.svelte b/packages/ui/core-components/src/lib/atoms/inputs/slider/_Slider.svelte
@@ -4,8 +4,6 @@
 
 <script>
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
-	import { browser } from '$app/environment';
-	import { page } from '$app/stores';
 	import { hydrateFromUrlParam, updateUrlParam } from '@evidence-dev/sdk/utils/svelte';
 	const inputs = getInputContext();
 	import SliderShadcn from '../../shadcn/slider/sliderShadcn.svelte';
@@ -16,6 +14,7 @@
 		getFormatObjectFromString
 	} from '@evidence-dev/component-utilities/formatting';
 	import { toNumber } from '$lib/utils.js';
+	import { browserDebounce } from '@evidence-dev/sdk/utils';
 
 	/////
 	// Component Things
@@ -111,22 +110,8 @@
 		value = [v] ?? [defaultValue];
 	});
 
-	const debounce = (fn, delay) => {
-		let timeout;
-		return (...args) => {
-			clearTimeout(timeout);
-			timeout = setTimeout(() => {
-				fn(...args);
-			}, delay);
-		};
-	};
-
-	let debouncedUpdateUrl = debounce((name, value) => {
-		updateUrlParam(name, value);
-	}, 75); // Adjust the debounce delay (500ms) as needed
-
 	$: if (value) {
-		debouncedUpdateUrl(name, value);
+		updateUrlParam(name, value, 50);
 	}
 
 	const renderSize = (size) => {

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/text/TextInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/text/TextInput.svelte
@@ -4,7 +4,7 @@
 
 <script>
 	import { hydrateFromUrlParam, updateUrlParam } from '@evidence-dev/sdk/utils/svelte';
-  	import { browser } from '$app/environment';
+	import { browser } from '$app/environment';
 	import HiddenInPrint from '../shared/HiddenInPrint.svelte';
 	import Info from '../../../unsorted/ui/Info.svelte';
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
@@ -43,7 +43,7 @@
 
 	// const updateUrl = useUrlParams(name, (v) => value = v ?? "")
 
-	hydrateFromUrlParam(name, (v) => value = v ?? '');
+	hydrateFromUrlParam(name, (v) => (value = v ?? ''));
 	const setInputStore = () => {
 		let sqlString = value;
 		if (!unsafe) sqlString = sqlString.replaceAll("'", "''");
@@ -54,9 +54,9 @@
 			sql: `'${sqlString}'`,
 			search: (col) => `damerau_levenshtein(${col}, '${sqlString}')`
 		};
-		if(browser){
+		if (browser) {
 			// updateUrl(value)
-			updateUrlParam(name, value);
+			updateUrlParam(name, value, 300);
 		}
 	};