debounce function

README.md

@@ -3,7 +3,7 @@
 
 [![Build](https://github.com/uqbar-project/eg-paises-svelte/actions/workflows/build.yml/badge.svg)](https://github.com/uqbar-project/eg-paises-svelte/actions/workflows/build.yml)
 
-![demo](./videos/demo.gif)
+![demo](./videos/demoNueva.gif)
 
 En este ejemplo podemos estudiar
 

src/routes/+page.svelte

@@ -6,18 +6,34 @@
   import Bandera from '$lib/Bandera.svelte'
 
 	let paisBusqueda = $state('')
+	let busquedaAutomatica = $state(false)
 	let paises = $state<Pais[]>([])
 	let buscarHabilitado = $derived(paisBusqueda.trim() !== '')
 
 	const buscar = async () => {
 	  paises = await paisService.buscarPais(paisBusqueda)
 	}
 
-	const handleKeydown = async (event: { keyCode: number }) => {
+	const handleKeyDownBuscar = async (event: { keyCode: number }) => {
 	  if (event.keyCode === 13) {
 	    await buscar()
 	  }
 	}
+
+	let timeout: ReturnType<typeof setTimeout>
+
+	const debounce = (callback: Function, wait: number) => {
+		return (...args: any[]) => {
+			clearTimeout(timeout)
+			timeout = setTimeout(() => { callback(...args) }, wait)
+		}
+	}
+
+	const handleKeyUpBuscar = async () => {
+		if (busquedaAutomatica && buscarHabilitado) {
+			debounce(buscar, 1000)()
+		}
+	}
 </script>
 
 <div class='titulo'>
@@ -26,11 +42,18 @@
 <div class='busqueda'>
 	<input
 		data-testid='paisBusqueda'
-		onkeydown={handleKeydown}
+		onkeydown={handleKeyDownBuscar}
+		onkeyup={handleKeyUpBuscar}
 		bind:value={paisBusqueda}
 		placeholder='Ingrese un valor para buscar países'
 	/>
-	<button data-testid='buscar' onclick={buscar} disabled={!buscarHabilitado}>Buscar</button>
+	{#if !busquedaAutomatica}
+		<button data-testid='buscar' onclick={buscar} disabled={!buscarHabilitado}>Buscar</button>
+	{/if}
+</div>
+<div class='check'>
+	<input class='checkbox' type="checkbox" name="Buscar" id="buscar" bind:checked={busquedaAutomatica}>
+	<label for="buscar">Buscar automáticamente</label>
 </div>
 <div class='paises'>
 	{#each paises as pais, indice}

src/routes/pais/[code]/pais.css

@@ -46,4 +46,8 @@ img.superpoblado {
   margin-top: 1.5em;
   height: 3em;
   font-size: large;
+}
+
+.botonera:hover {
+  cursor: pointer;
 }

src/routes/paises.css

@@ -19,6 +19,22 @@ button {
   height: 2rem;
 }
 
+button:hover {
+  cursor: pointer;
+}
+
+.check {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.checkbox {
+  width: auto;
+  margin: 0 0.5rem;
+}
+
+
 .paises {
   margin-top: 1rem;
   display: grid;
@@ -46,7 +62,7 @@ button {
   color: darkslategray;
 }
 
-@media(min-width: 440px) {
+@media(max-width: 500px) {
   .paises {
     grid-template-columns: 1fr 1fr;
   }