UI Asíncrona Declarativa en Svelte 5

Las aplicaciones web modernas son fundamentalmente asíncronas. Los usuarios esperan retroalimentación instantánea mientras los datos se cargan desde APIs, los archivos se suben a servidores y los cálculos complejos se completan en segundo plano. Gestionar estas operaciones asíncronas—mostrar indicadores de carga, mostrar resultados, manejar fallos—ha requerido tradicionalmente código imperativo verboso que oscurece la lógica real de la UI.

El bloque #await de Svelte 5 transforma este desafío en un patrón declarativo elegante. En lugar de rastrear manualmente los estados de las promesas con banderas booleanas y bloques try-catch, describes qué debe renderizarse en cada estado directamente en tu plantilla. El framework maneja la máquina de estados internamente, asegurando que tu UI siempre refleje la realidad actual de tus operaciones asíncronas.

Este tutorial explora el bloque #await de forma exhaustiva: desde patrones de uso básicos hasta técnicas de composición avanzadas, desde la recuperación elegante de errores hasta las actualizaciones optimistas de la UI. Al finalizar, entenderás no solo la sintaxis, sino el modelo mental para construir interfaces asíncronas robustas.

El Problema

Gestionar los Estados de una Promesa de Forma Imperativa

Muchos desarrolladores comienzan manejando datos asíncronos con gestión manual del estado. El siguiente ejemplo muestra cómo podrías obtener datos de usuario y rastrear los estados de carga, error y resultado de forma imperativa. Este enfoque funciona, pero rápidamente se vuelve verboso y propenso a errores a medida que tu aplicación crece.

<script>
	let user = $state(null)
	let loading = $state(true)
	let error = $state(null)

	async function fetchUser(id) {
		loading = true
		error = null
		user = null

		try {
			const response = await fetch(`/api/users/${id}`)
			if (!response.ok) throw new Error('Failed to fetch user')
			user = await response.json()
		} catch (err) {
			error = err
		} finally {
			loading = false
		}
	}

	$effect(() => {
		fetchUser(1)
	})
</script>

{#if loading}
	<div class="skeleton">Loading...</div>
{:else if error}
	<div class="error">Error: {error.message}</div>
{:else if user}
	<div class="user-card">
		<h2>{user.name}</h2>
		<p>{user.email}</p>
	</div>
{/if}

Esto funciona, pero es verboso. Estás gestionando manualmente tres piezas de estado (loading, error, user) que están inherentemente conectadas. Debes recordar restablecerlas apropiadamente, manejar el bloque finally correctamente y coordinar el renderizado condicional. A medida que tu aplicación crece con múltiples operaciones asíncronas, este código repetitivo se multiplica.

El bloque #await elimina por completo esta ceremonia.

Sintaxis Básica

Los Tres Estados de una Promesa

El bloque #await de Svelte está diseñado para mapear directamente los tres posibles estados de una Promise de JavaScript. Comprender estos estados es clave para usar el bloque de manera efectiva.

Pendiente: La operación está en progreso
Resuelta: La operación se completó exitosamente con un valor
Rechazada: La operación falló con un error

El bloque #await mapea directamente a estos estados:

{#await promise}
	<!-- Pending: promise is still resolving -->
	<p>Loading...</p>
{:then value}
	<!-- Fulfilled: promise resolved successfully -->
	<p>The result is: {value}</p>
{:catch error}
	<!-- Rejected: promise was rejected -->
	<p>Error: {error.message}</p>
{/await}

Veamos esto en acción:

A continuación se muestra un ejemplo práctico usando el bloque #await para obtener datos de usuario. Observa cómo la UI se actualiza automáticamente a medida que cambia el estado de la promesa, sin gestión manual del estado.

<script>
	let userId = $state(1)

	async function fetchUser(id) {
		const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
		if (!response.ok) throw new Error(`HTTP ${response.status}`)
		return response.json()
	}

	// Derived promise that re-fetches when userId changes
	let userPromise = $derived(fetchUser(userId))
</script>

<div class="user-selector">
	<label>
		User ID:
		<input type="number" bind:value={userId} min="1" max="10" />
	</label>
</div>

{#await userPromise}
	<div class="loading-card">
		<div class="skeleton-avatar"></div>
		<div class="skeleton-text"></div>
		<div class="skeleton-text short"></div>
	</div>
{:then user}
	<div class="user-card">
		<h2>{user.name}</h2>
		<p class="email">{user.email}</p>
		<p class="company">{user.company.name}</p>
	</div>
{:catch error}
	<div class="error-card">
		<span class="icon">⚠️</span>
		<p>Failed to load user: {error.message}</p>
		<button onclick={() => (userId = userId)}>Retry</button>
	</div>
{/await}

<style>
	.loading-card,
	.user-card,
	.error-card {
		padding: 1.5rem;
		border-radius: 8px;
		margin-top: 1rem;
	}

	.loading-card {
		background: #f1f5f9;
	}

	.skeleton-avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
		background-size: 200% 100%;
		animation: shimmer 1.5s infinite;
	}

	.skeleton-text {
		height: 1rem;
		margin-top: 0.75rem;
		background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
		background-size: 200% 100%;
		animation: shimmer 1.5s infinite;
		border-radius: 4px;
	}

	.skeleton-text.short {
		width: 60%;
	}

	@keyframes shimmer {
		0% {
			background-position: 200% 0;
		}
		100% {
			background-position: -200% 0;
		}
	}

	.user-card {
		background: white;
		border: 1px solid #e2e8f0;
	}

	.error-card {
		background: #fef2f2;
		border: 1px solid #fecaca;
		color: #dc2626;
		text-align: center;
	}
</style>

Cuando userId cambia, Svelte crea una nueva promesa, y el bloque {#await} transiciona automáticamente por sus estados. No se requiere gestión manual del estado.

Expresiones Await en Plantillas

Svelte 5 introduce una abreviatura poderosa: puedes usar await directamente en expresiones de plantilla. Esto es especialmente útil para valores asíncronos simples donde no necesitas estados de carga o error.

<script>
	async function getGreeting() {
		const response = await fetch('/api/greeting')
		return response.json()
	}
</script>

<!-- Shorthand: await directly in expression -->
<h1>{await getGreeting()}</h1>

<!-- Equivalent to: -->
{#await getGreeting() then greeting}
	<h1>{greeting}</h1>
{/await}

Actualizaciones Sincronizadas

Cuando múltiples expresiones await dependen del mismo valor asíncrono, Svelte sincroniza sus actualizaciones para prevenir inconsistencias visuales:

<script>
	async function fetchUser(id) {
		const res = await fetch(`/api/users/${id}`)
		return res.json()
	}

	let userId = $state(1)
	let userPromise = $derived(fetchUser(userId))
</script>

<!-- Both update together, not one at a time -->
<h1>Welcome, {(await userPromise).name}!</h1>
<p>Email: {(await userPromise).email}</p>

Cuándo Usar Cuál

Patrón	Caso de Uso
`{await expr}`	Visualización simple, sin UI de carga/error necesaria
Bloque `{#await}`	Se necesitan estados de carga, manejo de errores o UI compleja

Las expresiones await no renderizan nada hasta que se resuelven. Para estados de carga, usa el bloque {#await} completo.

Variaciones de Sintaxis

Flexibilidad para Diferentes Necesidades

No toda operación asíncrona requiere el mismo nivel de retroalimentación en la UI. Una obtención de datos crítica podría necesitar indicadores de carga, visualización de éxito y mensajes de error detallados—mientras que una sincronización en segundo plano podría solo necesitar mostrar los fallos. Svelte reconoce esta realidad y proporciona múltiples formas sintácticas del bloque #await, cada una optimizada para diferentes escenarios.

Entender cuándo usar cada variación es clave para escribir código limpio y mantenible. Exploremos cada forma, comenzando con la más completa y avanzando hacia la más mínima.

Forma Completa: Los Tres Estados

La sintaxis completa de #await maneja los tres estados de la promesa de forma explícita. Esta es tu opción predeterminada cuando la experiencia del usuario demanda retroalimentación clara en cada etapa de una operación asíncrona.

Cuándo usar esta forma:

Obtención de datos que los usuarios están esperando activamente
Operaciones donde los fallos son probables y necesitan mensajes claros
Cualquier situación donde los usuarios se beneficien de saber que "algo está ocurriendo"

{#await promise}
	<LoadingSpinner />
{:then data}
	<DataDisplay {data} />
{:catch error}
	<ErrorMessage {error} />
{/await}

La estructura refleja un modelo mental de try-catch-finally: mostrar carga mientras se intenta, mostrar resultados en caso de éxito, manejar errores en caso de fallo. Cada rama es mutuamente exclusiva—solo una se renderiza en cualquier momento.

Omitir el Bloque Catch

A veces quieres manejar los errores en un nivel superior de tu árbol de componentes en lugar de hacerlo de forma inline. El componente <svelte:boundary> de Svelte proporciona esta capacidad, capturando errores de cualquier componente descendiente. Cuando usas boundaries, omitir el bloque :catch mantiene tus bloques await enfocados en el camino feliz.

Cuándo usar esta forma:

Tienes un error boundary envolviendo este componente
La promesa genuinamente no puede rechazarse (raro, pero posible)
Quieres que los errores suban para un manejo centralizado

{#await promise}
	<p>Computing...</p>
{:then result}
	<p>Result: {result}</p>
{/await}

Si la promesa se rechaza y has omitido el bloque {:catch}, el error se propagará al <svelte:boundary> más cercano o quedará sin manejar. Los rechazos no manejados pueden causar comportamientos confusos, así que usa esta forma intencionalmente, no accidentalmente.

Omitir el Bloque Pendiente

Para operaciones que típicamente se completan casi de forma instantánea—como leer desde un caché local o realizar un cálculo rápido—un estado de carga puede en realidad degradar la experiencia del usuario. Un indicador que aparece por 50 milisegundos se siente torpe. En estos casos, no mostrar nada durante el breve estado pendiente crea una experiencia más fluida.

Cuándo usar esta forma:

Operaciones que se espera completen en menos de 100ms
Datos en caché que casi siempre están disponibles de inmediato
Contenido secundario donde la retroalimentación instantánea no es crítica

{#await promise then value}
	<p>The answer is {value}</p>
{/await}

Esta abreviatura no renderiza nada mientras está pendiente, luego muestra el contenido cuando se resuelve. Nota la diferencia de sintaxis: then aparece en la misma línea que #await, y no hay un bloque pendiente separado.

Si no estás seguro de si una operación es lo suficientemente rápida como para omitir el estado de carga, inclínate por mostrarlo. Los usuarios toleran mejor los indicadores breves que preguntarse si algo está roto.

Solo Capturar Errores

Algunas operaciones se ejecutan silenciosamente en segundo plano—pings de analíticas, prefetching, operaciones de autoguardado. Para estas, el éxito es la norma esperada y no necesita reconocimiento en la UI. Solo los fallos merecen la atención del usuario.

Cuándo usar esta forma:

Operaciones de sincronización en segundo plano
Llamadas de analíticas o registro
UI optimista donde se asume el éxito
Prefetching de recursos para navegación futura

{#await promise catch error}
	<p class="error">Something went wrong: {error.message}</p>
{/await}

Esto no renderiza nada en caso de éxito—útil para operaciones en segundo plano donde el éxito es la norma silenciosa. La UI permanece limpia cuando las cosas funcionan, pero muestra los problemas cuando ocurren.

Aquí hay un ejemplo práctico—un indicador de autoguardado que solo aparece en caso de fallo:

<script>
	let content = $state('')
	let savePromise = $state(Promise.resolve())

	function autoSave() {
		savePromise = fetch('/api/save', {
			method: 'POST',
			body: JSON.stringify({ content })
		})
	}

	// Debounced auto-save on content change
	$effect(() => {
		content // track dependency
		const timer = setTimeout(autoSave, 1000)
		return () => clearTimeout(timer)
	})
</script>

<textarea bind:value={content}></textarea>

{#await savePromise catch error}
	<p class="save-error">Auto-save failed: {error.message}</p>
{/await}

Valores que No Son Promesas

Este es un comportamiento que sorprende a muchos desarrolladores: el bloque #await no requiere una Promise. Si pasas un valor que no es una Promise, Svelte va directamente a la rama :then con ese valor. Esto ocurre de forma síncrona, incluyendo durante el renderizado del lado del servidor.

Por qué esto importa:

Puedes usar #await con valores que pueden o no ser asíncronos
El SSR funciona correctamente—los valores que no son Promise se renderizan inmediatamente en el servidor
Habilita patrones donde las fuentes de datos son intercambiables

<script>
	let data = $state({ name: 'Already loaded' })
</script>

{#await data}
	<p>This never shows because data isn't a Promise</p>
{:then value}
	<p>{value.name}</p>
	<!-- Renders immediately -->
{/await}

Este comportamiento hace que {#await} sea seguro de usar con valores que pueden o no ser promesas—un escenario común cuando estás abstrayendo fuentes de datos o trabajando con cachés.

Ejemplo práctico: Un cargador de datos que retorna datos en caché de forma síncrona o los obtiene de forma asíncrona:

<script>
	const cache = new Map()

	function getData(id) {
		if (cache.has(id)) {
			return cache.get(id) // Returns plain object, not Promise
		}
		return fetch(`/api/data/${id}`)
			.then((r) => r.json())
			.then((data) => {
				cache.set(id, data)
				return data
			})
	}

	let itemId = $state(1)
	let dataResult = $derived(getData(itemId))
</script>

{#await dataResult}
	<p>Loading...</p>
{:then data}
	<p>{data.name}</p>
{/await}

Cuando dataResult es un valor en caché, el estado de carga nunca aparece momentáneamente—los usuarios ven el contenido de inmediato. Cuando es una solicitud de red, el estado de carga aparece apropiadamente.

Desestructuración en Bloques Await

Las cláusulas :then y :catch admiten desestructuración, lo que permite una extracción limpia de datos anidados:

Desestructuración de Objetos

<script>
	async function fetchUserWithPosts(id) {
		const [userRes, postsRes] = await Promise.all([
			fetch(`/api/users/${id}`),
			fetch(`/api/users/${id}/posts`)
		])

		return {
			user: await userRes.json(),
			posts: await postsRes.json(),
			fetchedAt: new Date()
		}
	}

	let userId = $state(1)
	let dataPromise = $derived(fetchUserWithPosts(userId))
</script>

{#await dataPromise}
	<p>Loading user and posts...</p>
{:then { user, posts, fetchedAt }}
	<article>
		<header>
			<h1>{user.name}</h1>
			<time>Fetched at {fetchedAt.toLocaleTimeString()}</time>
		</header>
		<section class="posts">
			{#each posts as post}
				<div class="post">
					<h3>{post.title}</h3>
					<p>{post.body}</p>
				</div>
			{/each}
		</section>
	</article>
{:catch { message, status }}
	<div class="error">
		<p>Error {status}: {message}</p>
	</div>
{/await}

Desestructuración de Arrays

{#await fetchCoordinates()}
	<p>Getting location...</p>
{:then [latitude, longitude]}
	<p>You are at {latitude}, {longitude}</p>
{:catch error}
	<p>Location unavailable: {error.message}</p>
{/await}

Importaciones Dinámicas con Desestructuración

Un patrón poderoso para la división de código: importa componentes dinámicamente y desestructura la exportación predeterminada:

{#await import('./HeavyComponent.svelte') then { default: HeavyComponent }}
	<HeavyComponent someProp="value" />
{/await}

Esto retrasa la carga de HeavyComponent hasta que el bloque {#await} se renderice, reduciendo el tamaño de tu bundle inicial.

Desestructuración Anidada con Valores Predeterminados

Para APIs con formas de respuesta inconsistentes:

{#await apiCall()}
	<p>Loading...</p>
{:then { items = [], meta: { total = 0 } = {} }}
	<p>Found {total} items</p>
	{#each items as item}
		<div>{item.name}</div>
	{/each}
{:catch { status = 500, message = 'Unknown error' }}
	<p>Error {status}: {message}</p>
{/await}

Los valores predeterminados protegen contra propiedades indefinidas en cualquier nivel de anidamiento.

Promesas Reactivas

Re-ejecución Automática

Uno de los patrones más poderosos combina {#await} con $derived para crear promesas que se re-ejecutan automáticamente cuando cambian sus dependencias:

<script>
	let searchQuery = $state('')
	let category = $state('all')
	let page = $state(1)

	async function searchProducts(query, category, page) {
		const params = new URLSearchParams({
			q: query,
			category: category === 'all' ? '' : category,
			page: String(page),
			limit: '20'
		})

		const response = await fetch(`/api/products?${params}`)
		if (!response.ok) throw new Error('Search failed')
		return response.json()
	}

	// This promise re-creates whenever searchQuery, category, or page changes
	let resultsPromise = $derived(searchProducts(searchQuery, category, page))
</script>

<div class="search-controls">
	<input type="search" placeholder="Search products..." bind:value={searchQuery} />

	<select bind:value={category}>
		<option value="all">All Categories</option>
		<option value="electronics">Electronics</option>
		<option value="clothing">Clothing</option>
		<option value="books">Books</option>
	</select>
</div>

{#await resultsPromise}
	<div class="results-grid loading">
		{#each Array(6) as _}
			<div class="product-skeleton"></div>
		{/each}
	</div>
{:then { products, total, pages }}
	<p class="results-count">{total} products found</p>

	<div class="results-grid">
		{#each products as product (product.id)}
			<div class="product-card">
				<img src={product.image} alt={product.name} />
				<h3>{product.name}</h3>
				<p class="price">${product.price.toFixed(2)}</p>
			</div>
		{/each}
	</div>

	<div class="pagination">
		<button disabled={page === 1} onclick={() => page--}>Previous</button>
		<span>Page {page} of {pages}</span>
		<button disabled={page === pages} onclick={() => page++}>Next</button>
	</div>
{:catch error}
	<div class="error-state">
		<p>Search failed: {error.message}</p>
		<button onclick={() => (searchQuery = searchQuery)}>Retry</button>
	</div>
{/await}

Cada vez que cambia algún filtro, se ejecuta automáticamente una nueva búsqueda. La UI transiciona suavemente a través de cargando → resultados (o error) sin orquestación manual.

Manejo de Condiciones de Carrera

Usando AbortController

Un desafío crítico con las promesas reactivas: cuando el usuario cambia los inputs rápidamente, múltiples solicitudes pueden estar en vuelo simultáneamente. Si una solicitud más lenta se resuelve después de una más rápida, se mostrarán datos desactualizados. La solución es AbortController:

<script>
	let searchQuery = $state('')
	let controller = $state(null)

	async function search(query) {
		// Cancel any in-flight request
		if (controller) {
			controller.abort()
		}

		// Create new controller for this request
		controller = new AbortController()
		const { signal } = controller

		try {
			const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal })

			if (!response.ok) throw new Error(`HTTP ${response.status}`)
			return response.json()
		} catch (error) {
			// Don't treat abort as an error
			if (error.name === 'AbortError') {
				// Return a never-resolving promise to prevent state update
				return new Promise(() => {})
			}
			throw error
		}
	}

	let resultsPromise = $derived(search(searchQuery))
</script>

<input type="search" bind:value={searchQuery} placeholder="Search..." />

{#await resultsPromise}
	<p>Searching...</p>
{:then results}
	{#if results.length > 0}
		<ul>
			{#each results as result}
				<li>{result.title}</li>
			{/each}
		</ul>
	{:else}
		<p>No results found</p>
	{/if}
{:catch error}
	<p class="error">{error.message}</p>
{/await}

Encapsulando AbortController en un Patrón Reutilizable

Para un código más limpio, crea una función utilitaria:

<script>
	let searchQuery = $state('')

	function createAbortableFetcher() {
		let controller = null

		return async function abortableFetch(url, options = {}) {
			// Abort previous request
			controller?.abort()
			controller = new AbortController()

			try {
				const response = await fetch(url, {
					...options,
					signal: controller.signal
				})

				if (!response.ok) {
					throw new Error(`HTTP ${response.status}`)
				}

				return response.json()
			} catch (error) {
				if (error.name === 'AbortError') {
					// Return pending promise to "freeze" the await block
					return new Promise(() => {})
				}
				throw error
			}
		}
	}

	const abortableFetch = createAbortableFetcher()

	let resultsPromise = $derived(
		searchQuery.trim()
			? abortableFetch(`/api/search?q=${encodeURIComponent(searchQuery)}`)
			: Promise.resolve([])
	)
</script>

Debouncing de Promesas Reactivas

La entrada rápida del usuario (como escribir en un cuadro de búsqueda) puede generar llamadas excesivas a la API. Combina {#await} con debouncing para una búsqueda reactiva eficiente:

<script>
	let searchInput = $state('')
	let debouncedQuery = $state('')

	// Debounce the search input
	$effect(() => {
		const timer = setTimeout(() => {
			debouncedQuery = searchInput
		}, 300)

		return () => clearTimeout(timer)
	})

	async function search(query) {
		if (!query.trim()) return { results: [], total: 0 }

		const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`)
		if (!response.ok) throw new Error('Search failed')
		return response.json()
	}

	// Promise only updates when debounced value changes
	let searchPromise = $derived(search(debouncedQuery))
</script>

<input type="search" placeholder="Type to search..." bind:value={searchInput} />

{#if searchInput !== debouncedQuery}
	<p class="typing-indicator">Searching...</p>
{/if}

{#await searchPromise}
	<div class="search-loading">
		<span class="spinner"></span>
	</div>
{:then { results, total }}
	{#if total > 0}
		<ul class="search-results">
			{#each results as result}
				<li>{result.title}</li>
			{/each}
		</ul>
	{:else if debouncedQuery}
		<p class="no-results">No results for "{debouncedQuery}"</p>
	{/if}
{:catch error}
	<p class="error">{error.message}</p>
{/await}

La UI muestra retroalimentación inmediata ("Buscando...") durante el debouncing, luego transiciona al estado de carga cuando comienza la búsqueda real.

Mantener Datos Anteriores Mientras se Carga

(Stale-While-Revalidate)

Cuando se actualizan datos basados en la entrada del usuario, generalmente es mejor UX mostrar los resultados anteriores mientras se cargan los nuevos, en lugar de un estado en blanco o un spinner. Este patrón se conoce como "stale-while-revalidate":

<script>
	let category = $state('electronics')
	let previousData = $state(null)

	async function fetchProducts(category) {
		const response = await fetch(`/api/products?category=${category}`)
		if (!response.ok) throw new Error('Failed to fetch')
		const data = await response.json()

		// Store successful results for next time
		previousData = data
		return data
	}

	let productsPromise = $derived(fetchProducts(category))
</script>

<select bind:value={category}>
	<option value="electronics">Electronics</option>
	<option value="clothing">Clothing</option>
	<option value="books">Books</option>
</select>

{#await productsPromise}
	<!-- Show previous data with loading indicator overlay -->
	{#if previousData}
		<div class="products-container loading">
			<div class="loading-overlay">
				<span class="spinner"></span>
				Updating...
			</div>
			<div class="products-grid stale">
				{#each previousData.products as product (product.id)}
					<div class="product-card">{product.name}</div>
				{/each}
			</div>
		</div>
	{:else}
		<div class="skeleton-grid">
			{#each Array(6) as _}
				<div class="product-skeleton"></div>
			{/each}
		</div>
	{/if}
{:then data}
	<div class="products-grid">
		{#each data.products as product (product.id)}
			<div class="product-card">{product.name}</div>
		{/each}
	</div>
{:catch error}
	<p class="error">{error.message}</p>
{/await}

<style>
	.products-container.loading {
		position: relative;
	}

	.loading-overlay {
		position: absolute;
		inset: 0;
		background: rgba(255, 255, 255, 0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		z-index: 10;
	}

	.stale {
		opacity: 0.6;
		pointer-events: none;
	}
</style>

Implementación de Caché Avanzada

Para un caché más sofisticado con TTL (time-to-live) y lógica stale-while-revalidate, considera este patrón:

<script>
	const cache = new Map()
	const CACHE_TTL = 60000 // 1 minute

	async function fetchWithCache(key, fetcher) {
		const cached = cache.get(key)
		const now = Date.now()

		// Return fresh cached data immediately
		if (cached && now - cached.timestamp < CACHE_TTL) {
			return cached.data
		}

		// Fetch fresh data
		const data = await fetcher()
		cache.set(key, { data, timestamp: now })

		return data
	}

	// For stale-while-revalidate pattern
	function fetchWithSWR(key, fetcher) {
		const cached = cache.get(key)

		const freshPromise = fetcher().then((data) => {
			cache.set(key, { data, timestamp: Date.now() })
			return data
		})

		// If we have any cached data, return it immediately
		if (cached) {
			// Still fetch in background to update cache
			freshPromise.catch(() => {}) // Suppress unhandled rejection
			return cached.data
		}

		return freshPromise
	}

	let userId = $state(1)
	let userPromise = $derived(
		fetchWithSWR(`user-${userId}`, () => fetch(`/api/users/${userId}`).then((r) => r.json()))
	)
</script>

Este patrón proporciona un mecanismo de caché robusto que equilibra la inmediatez con la frescura de los datos, mejorando la experiencia del usuario durante las actualizaciones de datos.

Bloques Await Anidados

Las aplicaciones complejas a menudo requieren múltiples operaciones asíncronas que dependen entre sí o pueden ejecutarse en paralelo. Los bloques #await de Svelte pueden anidarse o combinarse para manejar estos escenarios de forma limpia.

Dependencias Secuenciales

Cuando una operación asíncrona depende del resultado de otra, no se puede obtener B hasta que A se complete. En este caso, anidar bloques #await puede manejar la secuencia:

<script>
	async function fetchUser(id) {
		const res = await fetch(`/api/users/${id}`)
		return res.json()
	}

	async function fetchUserOrders(userId) {
		const res = await fetch(`/api/users/${userId}/orders`)
		return res.json()
	}

	async function fetchOrderDetails(orderId) {
		const res = await fetch(`/api/orders/${orderId}`)
		return res.json()
	}

	let userId = $state(1)
	let selectedOrderId = $state(null)
</script>

{#await fetchUser(userId)}
	<div class="user-loading">Loading user...</div>
{:then user}
	<div class="user-header">
		<h1>{user.name}</h1>
		<p>{user.email}</p>
	</div>

	{#await fetchUserOrders(user.id)}
		<div class="orders-loading">Loading orders...</div>
	{:then orders}
		<div class="orders-list">
			<h2>Orders ({orders.length})</h2>
			{#each orders as order}
				<button
					class="order-item"
					class:selected={selectedOrderId === order.id}
					onclick={() => (selectedOrderId = order.id)}
				>
					Order #{order.id} - ${order.total.toFixed(2)}
				</button>
			{/each}
		</div>

		{#if selectedOrderId}
			{#await fetchOrderDetails(selectedOrderId)}
				<div class="order-details-loading">Loading order details...</div>
			{:then orderDetails}
				<div class="order-details">
					<h3>Order #{orderDetails.id}</h3>
					<ul>
						{#each orderDetails.items as item}
							<li>
								{item.name} × {item.quantity} = ${(item.price * item.quantity).toFixed(2)}
							</li>
						{/each}
					</ul>
					<p class="total">Total: ${orderDetails.total.toFixed(2)}</p>
				</div>
			{:catch error}
				<p class="error">Failed to load order: {error.message}</p>
			{/await}
		{/if}
	{:catch error}
		<p class="error">Failed to load orders: {error.message}</p>
	{/await}
{:catch error}
	<p class="error">Failed to load user: {error.message}</p>
{/await}

Cada nivel espera a su padre antes de realizar la solicitud. La UI revela progresivamente los datos a medida que están disponibles.

Carga Paralela con `Promise.all`

Cuando múltiples operaciones asíncronas independientes pueden ejecutarse simultáneamente, usa Promise.all para obtenerlas en paralelo. Esto reduce el tiempo total de carga en comparación con la obtención secuencial.

<script>
	async function fetchDashboardData() {
		const [stats, recentActivity, notifications] = await Promise.all([
			fetch('/api/stats').then((r) => r.json()),
			fetch('/api/activity').then((r) => r.json()),
			fetch('/api/notifications').then((r) => r.json())
		])

		return { stats, recentActivity, notifications }
	}

	let dashboardPromise = $derived(fetchDashboardData())
</script>

{#await dashboardPromise}
	<div class="dashboard-skeleton">
		<div class="skeleton-stats"></div>
		<div class="skeleton-activity"></div>
		<div class="skeleton-notifications"></div>
	</div>
{:then { stats, recentActivity, notifications }}
	<div class="dashboard">
		<section class="stats-panel">
			<div class="stat">
				<span class="value">{stats.totalUsers}</span>
				<span class="label">Users</span>
			</div>
			<div class="stat">
				<span class="value">${stats.revenue.toLocaleString()}</span>
				<span class="label">Revenue</span>
			</div>
			<div class="stat">
				<span class="value">{stats.activeProjects}</span>
				<span class="label">Projects</span>
			</div>
		</section>

		<section class="activity-panel">
			<h2>Recent Activity</h2>
			<ul>
				{#each recentActivity as activity}
					<li>
						<span class="user">{activity.user}</span>
						<span class="action">{activity.action}</span>
						<time>{activity.timestamp}</time>
					</li>
				{/each}
			</ul>
		</section>

		<section class="notifications-panel">
			<h2>Notifications ({notifications.unread})</h2>
			{#each notifications.items as notification}
				<div class="notification" class:unread={!notification.read}>
					<p>{notification.message}</p>
				</div>
			{/each}
		</section>
	</div>
{:catch error}
	<div class="dashboard-error">
		<p>Failed to load dashboard: {error.message}</p>
		<button onclick={() => (dashboardPromise = fetchDashboardData())}> Retry </button>
	</div>
{/await}

Las tres llamadas a la API se ejecutan simultáneamente, reduciendo el tiempo total de carga en comparación con la obtención secuencial.

Usa `Promise.allSettled` para Fallos Parciales

Cuando deseas mostrar lo que tiene éxito, incluso si algunas solicitudes fallan:

<script>
	async function fetchWidgetData() {
		const results = await Promise.allSettled([
			fetch('/api/weather').then((r) => r.json()),
			fetch('/api/stocks').then((r) => r.json()),
			fetch('/api/news').then((r) => r.json())
		])

		return {
			weather: results[0].status === 'fulfilled' ? results[0].value : null,
			stocks: results[1].status === 'fulfilled' ? results[1].value : null,
			news: results[2].status === 'fulfilled' ? results[2].value : null,
			errors: results.filter((r) => r.status === 'rejected').map((r) => r.reason)
		}
	}

	let widgetPromise = $derived(fetchWidgetData())
</script>

{#await widgetPromise}
	<p>Loading widgets...</p>
{:then { weather, stocks, news, errors }}
	{#if errors.length > 0}
		<div class="partial-error">Some widgets failed to load</div>
	{/if}

	<div class="widget-grid">
		{#if weather}
			<div class="widget weather">
				<h3>Weather</h3>
				<p>{weather.temperature}°F - {weather.condition}</p>
			</div>
		{:else}
			<div class="widget weather error">
				<p>Weather unavailable</p>
			</div>
		{/if}

		{#if stocks}
			<div class="widget stocks">
				<h3>Stocks</h3>
				{#each stocks.symbols as stock}
					<p>{stock.symbol}: ${stock.price}</p>
				{/each}
			</div>
		{:else}
			<div class="widget stocks error">
				<p>Stocks unavailable</p>
			</div>
		{/if}

		{#if news}
			<div class="widget news">
				<h3>News</h3>
				{#each news.headlines.slice(0, 3) as headline}
					<p>{headline}</p>
				{/each}
			</div>
		{:else}
			<div class="widget news error">
				<p>News unavailable</p>
			</div>
		{/if}
	</div>
{/await}

Este patrón proporciona degradación elegante: los usuarios ven lo que está disponible en lugar de nada.

Bloques `#await` Independientes

Carga Similar a Suspense

A veces se desean múltiples operaciones asíncronas independientes con sus propios estados de carga, en lugar de esperar por todas. Esto crea una experiencia similar a "suspense" donde las partes de la UI aparecen tan pronto como sus datos están listos:

<script>
	async function fetchUserProfile() {
		await sleep(800) // Simulate latency
		return fetch('/api/profile').then((r) => r.json())
	}

	async function fetchNotifications() {
		await sleep(400)
		return fetch('/api/notifications').then((r) => r.json())
	}

	async function fetchRecommendations() {
		await sleep(1200)
		return fetch('/api/recommendations').then((r) => r.json())
	}

	function sleep(ms) {
		return new Promise((r) => setTimeout(r, ms))
	}

	let profilePromise = $derived(fetchUserProfile())
	let notificationsPromise = $derived(fetchNotifications())
	let recommendationsPromise = $derived(fetchRecommendations())
</script>

<div class="dashboard-grid">
	<!-- Each section loads independently -->
	<section class="profile-section">
		{#await profilePromise}
			<div class="skeleton profile-skeleton"></div>
		{:then profile}
			<div class="profile-card">
				<img src={profile.avatar} alt={profile.name} />
				<h2>{profile.name}</h2>
				<p>{profile.bio}</p>
			</div>
		{:catch error}
			<p class="error">Failed to load profile</p>
		{/await}
	</section>

	<section class="notifications-section">
		{#await notificationsPromise}
			<div class="skeleton notifications-skeleton"></div>
		{:then notifications}
			<div class="notifications-list">
				<h3>Notifications ({notifications.length})</h3>
				{#each notifications as notification}
					<div class="notification">{notification.message}</div>
				{/each}
			</div>
		{:catch error}
			<p class="error">Failed to load notifications</p>
		{/await}
	</section>

	<section class="recommendations-section">
		{#await recommendationsPromise}
			<div class="skeleton recommendations-skeleton"></div>
		{:then recommendations}
			<div class="recommendations-grid">
				<h3>Recommended for You</h3>
				{#each recommendations as item}
					<div class="recommendation-card">{item.title}</div>
				{/each}
			</div>
		{:catch error}
			<p class="error">Failed to load recommendations</p>
		{/await}
	</section>
</div>

Cada sección aparece tan pronto como sus datos están listos, proporcionando una experiencia de carga progresiva.

Transiciones con Bloques Await

Las directivas de transición de Svelte pueden aplicarse a los hijos directos de los bloques #await, permitiendo animaciones suaves entre los estados de carga, éxito y error. Esto mejora la experiencia del usuario al proporcionar retroalimentación visual durante los cambios de estado.

<script>
	import { fade, fly, slide } from 'svelte/transition'

	let query = $state('')
	let debouncedQuery = $state('')

	$effect(() => {
		const timer = setTimeout(() => {
			debouncedQuery = query
		}, 300)
		return () => clearTimeout(timer)
	})

	async function search(q) {
		if (!q) return []
		const res = await fetch(`/api/search?q=${q}`)
		return res.json()
	}

	let searchPromise = $derived(search(debouncedQuery))
</script>

<input bind:value={query} placeholder="Search..." />

{#await searchPromise}
	<div class="loading" transition:fade={{ duration: 150 }}>
		<span class="spinner"></span>
		Searching...
	</div>
{:then results}
	{#if results.length > 0}
		<ul class="results" transition:slide={{ duration: 200 }}>
			{#each results as result, i}
				<li transition:fly={{ y: 10, delay: i * 50 }}>
					{result.title}
				</li>
			{/each}
		</ul>
	{:else if debouncedQuery}
		<p class="no-results" transition:fade>
			No results for "{debouncedQuery}"
		</p>
	{/if}
{:catch error}
	<p class="error" transition:fade>
		{error.message}
	</p>
{/await}

Las transiciones en los hijos directos de los bloques #await funcionan mejor cuando los estados tienen contenido distinto. Para transiciones más suaves entre los estados de carga y cargado, considere usar #key:

{#key debouncedQuery}
	{#await searchPromise}
		<div in:fade out:fade>Loading...</div>
	{:then results}
		<div in:fade={{ delay: 150 }}>
			{#each results as result}
				<div>{result.title}</div>
			{/each}
		</div>
	{/await}
{/key}

Manejo de Tiempos de Espera

A veces, las solicitudes de red u operaciones asíncronas pueden tardar mucho más de lo esperado, o incluso quedar suspendidas indefinidamente. Sin un manejo adecuado de los tiempos de espera, su UI puede quedar atascada en un estado de carga, dejando a los usuarios frustrados y confundidos.

Es importante anticipar estos escenarios y proporcionar retroalimentación o comportamiento de reserva cuando las operaciones superan un límite de tiempo razonable. Esto puede lograrse envolviendo sus promesas con lógica de tiempo de espera.

Envoltura Simple de Tiempo de Espera

En este ejemplo, creamos una función withTimeout que rechaza una promesa si no se resuelve dentro de un límite de tiempo especificado. Luego usamos esta función para obtener datos con un tiempo de espera, proporcionando retroalimentación al usuario si la solicitud tarda demasiado.

<script>
	function withTimeout(promise, ms) {
		const timeout = new Promise((_, reject) => {
			setTimeout(() => reject(new Error(`Request timed out after ${ms}ms`)), ms)
		})
		return Promise.race([promise, timeout])
	}

	async function fetchData() {
		const response = await withTimeout(
			fetch('/api/slow-endpoint'),
			5000 // 5 second timeout
		)
		return response.json()
	}

	let dataPromise = $derived(fetchData())
</script>

{#await dataPromise}
	<div class="loading">
		<span class="spinner"></span>
		<p>Loading data...</p>
		<p class="hint">This may take a few seconds</p>
	</div>
{:then data}
	<div class="data">{JSON.stringify(data)}</div>
{:catch error}
	<div class="error">
		{#if error.message.includes('timed out')}
			<p>The request is taking too long. Please try again.</p>
		{:else}
			<p>{error.message}</p>
		{/if}
		<button onclick={() => (dataPromise = fetchData())}>Retry</button>
	</div>
{/await}

Combinación de Tiempo de Espera y AbortController

Para un manejo robusto de errores, a menudo es necesario combinar tanto un tiempo de espera como un AbortController. Este enfoque permite cancelar automáticamente las solicitudes lentas y liberar recursos, asegurando que su UI permanezca receptiva incluso cuando las condiciones de red son deficientes o el servidor no responde.

<script>
	function createFetchWithTimeout(timeoutMs = 10000) {
		return async function fetchWithTimeout(url, options = {}) {
			const controller = new AbortController()
			const timeoutId = setTimeout(() => controller.abort(), timeoutMs)

			try {
				const response = await fetch(url, {
					...options,
					signal: controller.signal
				})

				clearTimeout(timeoutId)
				return response
			} catch (error) {
				clearTimeout(timeoutId)

				if (error.name === 'AbortError') {
					throw new Error(`Request timed out after ${timeoutMs}ms`)
				}
				throw error
			}
		}
	}

	const fetchWithTimeout = createFetchWithTimeout(5000)
</script>

Estrategias de Manejo de Errores

Manejar los errores de manera elegante es esencial para construir aplicaciones resilientes y amigables para el usuario. En los flujos de trabajo asíncronos, los fallos pueden ocurrir por muchas razones: problemas de red, errores del servidor, datos inválidos o tiempos de espera agotados. El bloque #await de Svelte proporciona formas flexibles de mostrar estos errores a los usuarios, recuperarse de los fallos y mantener una experiencia fluida. Esta sección explora estrategias prácticas para el manejo de errores en escenarios del mundo real.

1. Visualización de Errores en Línea

El enfoque más directo es mostrar los errores directamente donde normalmente aparecerían sus datos. Esto mantiene al usuario informado sobre los problemas en contexto y permite una lógica de reintento simple.

{#await dataPromise}
	<LoadingSkeleton />
{:then data}
	<DataView {data} />
{:catch error}
	<div class="inline-error">
		<p>{error.message}</p>
		<button onclick={retry}>Try Again</button>
	</div>
{/await}

2. Límites de Error con `<svelte:boundary>`

Para el manejo de errores a nivel de toda la aplicación, puede usar los límites de error de Svelte. Este patrón le permite capturar y mostrar errores de cualquier componente hijo o bloque await, proporcionando un lugar centralizado para la recuperación de errores y el registro.

<script>
	let criticalDataPromise = $derived(fetchCriticalData())
</script>

<svelte:boundary onerror={(error) => logError(error)}>
	{#snippet failed(error, reset)}
		<div class="boundary-error">
			<h2>Something went wrong</h2>
			<p>{error.message}</p>
			<button onclick={reset}>Reset</button>
		</div>
	{/snippet}

	{#await criticalDataPromise}
		<p>Loading critical data...</p>
	{:then data}
		<CriticalComponent {data} />
	{/await}
	<!-- Errors will bubble up to the boundary if :catch is omitted -->
</svelte:boundary>

Uso del snippet `pending` para la Carga Inicial

Los límites también pueden mostrar un estado de carga mientras las expresiones await se resuelven por primera vez:

<svelte:boundary>
	{#snippet pending()}
		<div class="loading-overlay">
			<span class="spinner"></span>
			<p>Loading application...</p>
		</div>
	{/snippet}

	{#snippet failed(error, reset)}
		<p>Error: {error.message} <button onclick={reset}>Retry</button></p>
	{/snippet}

	<Dashboard />
</svelte:boundary>

Seguimiento del Conteo Pendiente con `$effect.pending()`

Para un control más granular, use $effect.pending() para saber cuántas promesas están pendientes dentro de un límite:

<svelte:boundary>
	{#snippet pending()}
		<p>Loading {$effect.pending()} item(s)...</p>
	{/snippet}

	<UserProfile />
	<Notifications />
	<Recommendations />
</svelte:boundary>

El snippet pending solo se muestra durante la carga inicial. Para actualizaciones asíncronas posteriores (como volver a obtener datos), use $effect.pending() para mostrar indicadores de carga en línea.

3. Reintento con Retroceso Exponencial y Retroalimentación Visual

A veces, los errores de red son temporales. Puede mejorar la confiabilidad reintentando automáticamente las solicitudes fallidas con retroceso exponencial, y mostrando a los usuarios qué intento está en progreso. Este patrón ayuda a recuperarse de conexiones inestables y da a los usuarios la confianza de que la aplicación está tratando de resolver los problemas.

<script>
	let retryState = $state({ attempt: 0, maxAttempts: 3, isRetrying: false })

	async function fetchWithRetry(url) {
		retryState = { attempt: 0, maxAttempts: 3, isRetrying: false }
		let lastError

		for (let attempt = 1; attempt <= retryState.maxAttempts; attempt++) {
			try {
				retryState = { ...retryState, attempt, isRetrying: attempt > 1 }

				const response = await fetch(url)
				if (!response.ok) throw new Error(`HTTP ${response.status}`)

				retryState = { ...retryState, isRetrying: false }
				return response.json()
			} catch (error) {
				lastError = error

				if (attempt < retryState.maxAttempts) {
					// Exponential backoff: 1s, 2s, 4s
					const delay = Math.pow(2, attempt - 1) * 1000
					await new Promise((r) => setTimeout(r, delay))
				}
			}
		}

		retryState = { ...retryState, isRetrying: false }
		throw lastError
	}

	let dataPromise = $derived(fetchWithRetry('/api/flaky-endpoint'))
</script>

{#await dataPromise}
	<div class="loading">
		{#if retryState.isRetrying}
			<p class="retry-notice">
				Retry attempt {retryState.attempt} of {retryState.maxAttempts}...
			</p>
		{:else}
			<p>Loading...</p>
		{/if}
		<span class="spinner"></span>
	</div>
{:then data}
	<div class="data">{JSON.stringify(data)}</div>
{:catch error}
	<div class="error">
		<p>Failed after {retryState.maxAttempts} attempts: {error.message}</p>
		<button onclick={() => (dataPromise = fetchWithRetry('/api/flaky-endpoint'))}>
			Try Again
		</button>
	</div>
{/await}

<style>
	.retry-notice {
		color: #f59e0b;
		font-weight: 500;
	}
</style>

4. Objetos de Error Tipados

Para el manejo avanzado de errores, puede crear clases de error personalizadas que incluyan información adicional como códigos de estado y tipos de error. Esto le permite distinguir entre diferentes escenarios de error y mostrar una UI adaptada para cada caso, mejorando tanto la experiencia del desarrollador como la retroalimentación al usuario.

<script>
	class ApiError extends Error {
		constructor(message, status, code) {
			super(message)
			this.status = status
			this.code = code
			this.name = 'ApiError'
		}
	}

	async function fetchData() {
		const response = await fetch('/api/data')

		if (!response.ok) {
			const body = await response.json().catch(() => ({}))
			throw new ApiError(body.message || 'Request failed', response.status, body.code || 'UNKNOWN')
		}

		return response.json()
	}

	let dataPromise = $derived(fetchData())
</script>

{#await dataPromise}
	<p>Loading...</p>
{:then data}
	<DataDisplay {data} />
{:catch error}
	{#if error instanceof ApiError}
		{#if error.status === 404}
			<NotFound message={error.message} />
		{:else if error.status === 401}
			<LoginPrompt />
		{:else if error.status === 403}
			<AccessDenied />
		{:else if error.status >= 500}
			<ServerError code={error.code} />
		{:else}
			<GenericError message={error.message} />
		{/if}
	{:else if error.name === 'TypeError' || error.message.includes('network')}
		<NetworkError />
	{:else}
		<UnexpectedError message={error.message} />
	{/if}
{/await}

Uso de `@const` Dentro de Bloques Await

La directiva @const le permite definir valores computados directamente dentro de las ramas de su bloque await. Esto mantiene sus plantillas limpias y facilita la derivación de estadísticas resumidas, indicadores u otros auxiliares para renderizar estados de UI complejos sin saturar su sección de script.

{#await fetchOrdersPromise}
	<p>Loading orders...</p>
{:then orders}
	{@const totalValue = orders.reduce((sum, o) => sum + o.total, 0)}
	{@const pendingOrders = orders.filter((o) => o.status === 'pending')}
	{@const averageOrderValue = orders.length > 0 ? totalValue / orders.length : 0}

	<div class="orders-summary">
		<p>Total Orders: {orders.length}</p>
		<p>Total Value: ${totalValue.toFixed(2)}</p>
		<p>Average Order: ${averageOrderValue.toFixed(2)}</p>
		<p>Pending: {pendingOrders.length}</p>
	</div>

	{#each orders as order}
		{@const isHighValue = order.total > averageOrderValue * 1.5}
		<div class="order" class:high-value={isHighValue}>
			<span>Order #{order.id}</span>
			<span>${order.total.toFixed(2)}</span>
			{#if isHighValue}
				<span class="badge">High Value</span>
			{/if}
		</div>
	{/each}
{:catch error}
	{@const isNetworkError = error.message.includes('network')}
	{@const isServerError = error.status >= 500}

	<div class="error-panel">
		{#if isNetworkError}
			<p>Please check your internet connection.</p>
		{:else if isServerError}
			<p>Our servers are having issues. Please try again later.</p>
		{:else}
			<p>{error.message}</p>
		{/if}
	</div>
{/await}

Patrón de Scroll Infinito

El scroll infinito es un patrón de UX popular para cargar más datos a medida que el usuario hace scroll, sin requerir paginación manual. Con el bloque #await de Svelte, puede gestionar los estados de carga y errores para cada lote de datos, proporcionando una experiencia fluida a medida que se obtienen y agregan nuevos elementos a la lista.

<script>
	let items = $state([])
	let page = $state(1)
	let hasMore = $state(true)
	let loadingMore = $state(false)
	let initialLoadPromise = $state(null)

	async function fetchPage(pageNum) {
		const response = await fetch(`/api/items?page=${pageNum}&limit=20`)
		if (!response.ok) throw new Error('Failed to fetch')
		return response.json()
	}

	async function loadInitial() {
		const data = await fetchPage(1)
		items = data.items
		hasMore = data.hasMore
		page = 1
		return data
	}

	async function loadMore() {
		if (loadingMore || !hasMore) return

		loadingMore = true
		try {
			const nextPage = page + 1
			const data = await fetchPage(nextPage)

			items = [...items, ...data.items]
			hasMore = data.hasMore
			page = nextPage
		} finally {
			loadingMore = false
		}
	}

	function handleScroll(event) {
		const { scrollTop, scrollHeight, clientHeight } = event.target
		const nearBottom = scrollHeight - scrollTop - clientHeight < 200

		if (nearBottom && hasMore && !loadingMore) {
			loadMore()
		}
	}

	// Initial load
	initialLoadPromise = loadInitial()
</script>

{#await initialLoadPromise}
	<div class="initial-loading">
		{#each Array(5) as _}
			<div class="item-skeleton"></div>
		{/each}
	</div>
{:then}
	<div class="items-container" onscroll={handleScroll}>
		{#each items as item (item.id)}
			<div class="item-card">
				<h3>{item.title}</h3>
				<p>{item.description}</p>
			</div>
		{/each}

		{#if loadingMore}
			<div class="loading-more">
				<span class="spinner"></span>
				Loading more...
			</div>
		{/if}

		{#if !hasMore && items.length > 0}
			<p class="end-message">You've reached the end!</p>
		{/if}
	</div>
{:catch error}
	<div class="error">
		<p>Failed to load items: {error.message}</p>
		<button onclick={() => (initialLoadPromise = loadInitial())}>Retry</button>
	</div>
{/await}

<style>
	.items-container {
		height: 600px;
		overflow-y: auto;
	}

	.loading-more {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 1rem;
	}

	.end-message {
		text-align: center;
		color: #6b7280;
		padding: 1rem;
	}
</style>

Actualizaciones Optimistas de UI

Las actualizaciones optimistas de UI hacen que su aplicación se sienta más rápida al reflejar inmediatamente las acciones del usuario en la interfaz, incluso antes de que el servidor responda. Esta técnica mejora el rendimiento percibido y la satisfacción del usuario, pero requiere un manejo cuidadoso de los errores y las reversiones si el servidor rechaza el cambio.

<script>
	let todos = $state([
		{ id: 1, text: 'Learn Svelte', completed: false },
		{ id: 2, text: 'Build an app', completed: false }
	])

	let pendingOperations = $state(new Map()) // id -> operation type

	async function toggleTodo(id) {
		const todo = todos.find((t) => t.id === id)
		const previousState = todo.completed

		// Optimistic update
		todo.completed = !todo.completed
		pendingOperations.set(id, 'toggle')
		pendingOperations = new Map(pendingOperations) // Trigger reactivity

		try {
			const response = await fetch(`/api/todos/${id}`, {
				method: 'PATCH',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({ completed: todo.completed })
			})

			if (!response.ok) throw new Error('Failed to update')
		} catch (error) {
			// Revert on failure
			todo.completed = previousState
			alert('Failed to update todo. Please try again.')
		} finally {
			pendingOperations.delete(id)
			pendingOperations = new Map(pendingOperations)
		}
	}

	async function deleteTodo(id) {
		const todoIndex = todos.findIndex((t) => t.id === id)
		const deletedTodo = todos[todoIndex]

		// Optimistic update
		todos = todos.filter((t) => t.id !== id)
		pendingOperations.set(id, 'delete')
		pendingOperations = new Map(pendingOperations)

		try {
			const response = await fetch(`/api/todos/${id}`, { method: 'DELETE' })
			if (!response.ok) throw new Error('Failed to delete')
		} catch (error) {
			// Revert on failure
			todos = [...todos.slice(0, todoIndex), deletedTodo, ...todos.slice(todoIndex)]
			alert('Failed to delete todo. Please try again.')
		} finally {
			pendingOperations.delete(id)
			pendingOperations = new Map(pendingOperations)
		}
	}
</script>

<ul class="todo-list">
	{#each todos as todo (todo.id)}
		{@const isPending = pendingOperations.has(todo.id)}
		{@const operation = pendingOperations.get(todo.id)}

		<li class:completed={todo.completed} class:pending={isPending}>
			<label>
				<input
					type="checkbox"
					checked={todo.completed}
					onchange={() => toggleTodo(todo.id)}
					disabled={isPending}
				/>
				<span>{todo.text}</span>
			</label>

			<div class="actions">
				{#if isPending}
					<span class="sync-indicator">
						{operation === 'toggle' ? 'Saving...' : 'Deleting...'}
					</span>
				{:else}
					<button onclick={() => deleteTodo(todo.id)}>Delete</button>
				{/if}
			</div>
		</li>
	{/each}
</ul>

<style>
	.pending {
		opacity: 0.6;
		pointer-events: none;
	}

	.completed span {
		text-decoration: line-through;
		color: #6b7280;
	}

	.sync-indicator {
		font-size: 0.75rem;
		color: #6b7280;
		font-style: italic;
	}
</style>

Envíos de Formularios con Bloques `#await`

Los envíos de formularios son una fuente común de complejidad asíncrona en la UI. Al usar el bloque #await de Svelte, puedes gestionar los estados de carga, éxito y error de forma declarativa, proporcionando retroalimentación clara a los usuarios y manteniendo la lógica de tu formulario simple y mantenible.

<script>
	let formData = $state({ email: '', message: '' })
	let submitState = $state('idle') // 'idle' | 'submitting' | 'success' | 'error'
	let submitPromise = $state(null)
	let submitError = $state(null)

	async function handleSubmit(event) {
		event.preventDefault()
		submitState = 'submitting'
		submitError = null

		submitPromise = fetch('/api/contact', {
			method: 'POST',
			headers: { 'Content-Type': 'application/json' },
			body: JSON.stringify(formData)
		}).then(async (response) => {
			if (!response.ok) {
				const error = await response.json()
				throw new Error(error.message || 'Submission failed')
			}
			return response.json()
		})

		try {
			await submitPromise
			submitState = 'success'
		} catch (error) {
			submitState = 'error'
			submitError = error
		}
	}

	function resetForm() {
		formData = { email: '', message: '' }
		submitState = 'idle'
		submitPromise = null
		submitError = null
	}
</script>

{#if submitState === 'idle' || submitState === 'error'}
	<form onsubmit={handleSubmit}>
		{#if submitError}
			<div class="form-error">
				{submitError.message}
			</div>
		{/if}

		<label>
			Email:
			<input type="email" bind:value={formData.email} required />
		</label>

		<label>
			Message:
			<textarea bind:value={formData.message} required></textarea>
		</label>

		<button type="submit">Send Message</button>
	</form>
{:else if submitState === 'submitting'}
	<div class="submitting">
		<span class="spinner"></span>
		<p>Sending your message...</p>
	</div>
{:else if submitState === 'success'}
	<div class="success">
		<span class="icon">✅</span>
		<h2>Message Sent!</h2>
		<p>We'll get back to you soon.</p>
		<button onclick={resetForm}>Send Another</button>
	</div>
{/if}

Patrón de Paginación

La paginación es un patrón clásico para mostrar grandes conjuntos de datos en fragmentos manejables. Con el bloque #await de Svelte, puedes manejar los estados de carga y errores para cada página, haciendo que la navegación entre páginas sea fluida y amigable para el usuario.

<script>
	let currentPage = $state(1)
	let pageSize = $state(10)

	async function fetchPage(page, size) {
		const response = await fetch(`/api/items?page=${page}&limit=${size}`)
		if (!response.ok) throw new Error('Failed to fetch')
		return response.json()
	}

	let pagePromise = $derived(fetchPage(currentPage, pageSize))
</script>

{#await pagePromise}
	<div class="table-loading">
		{#each Array(pageSize) as _}
			<div class="row-skeleton"></div>
		{/each}
	</div>
{:then { items, total, totalPages }}
	<table>
		<thead>
			<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Status</th>
			</tr>
		</thead>
		<tbody>
			{#each items as item (item.id)}
				<tr>
					<td>{item.id}</td>
					<td>{item.name}</td>
					<td>{item.status}</td>
				</tr>
			{/each}
		</tbody>
	</table>

	<div class="pagination">
		<button disabled={currentPage === 1} onclick={() => currentPage--}> Previous </button>

		<span>Page {currentPage} of {totalPages} ({total} total items)</span>

		<button disabled={currentPage === totalPages} onclick={() => currentPage++}> Next </button>
	</div>
{:catch error}
	<div class="table-error">
		<p>Failed to load data: {error.message}</p>
		<button onclick={() => (currentPage = currentPage)}>Retry</button>
	</div>
{/await}

Consideraciones de Accesibilidad

La accesibilidad es fundamental para que tu UI asíncrona sea utilizable por todos, incluyendo personas que usan lectores de pantalla u otras tecnologías de asistencia. Al agregar roles ARIA adecuados y regiones en vivo, puedes asegurarte de que los estados de carga, errores y actualizaciones de contenido sean anunciados de forma clara y oportuna a todos los usuarios.

<script>
	let dataPromise = $derived(fetchData())
</script>

{#await dataPromise}
	<!-- Announce loading state to screen readers -->
	<div role="status" aria-live="polite" aria-busy="true" class="loading">
		<span class="spinner" aria-hidden="true"></span>
		<span class="sr-only">Loading content, please wait...</span>
		<span aria-hidden="true">Loading...</span>
	</div>
{:then data}
	<!-- Announce when content is ready -->
	<div role="region" aria-live="polite" aria-busy="false" aria-label="Content loaded">
		<DataDisplay {data} />
	</div>
{:catch error}
	<!-- Announce errors clearly -->
	<div role="alert" aria-live="assertive" class="error">
		<span class="error-icon" aria-hidden="true">⚠️</span>
		<p>Error: {error.message}</p>
		<button onclick={retry}> Retry loading </button>
	</div>
{/await}

<style>
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
</style>

Prácticas clave de accesibilidad:

Usa role="status" para los estados de carga para que los lectores de pantalla los anuncien
Usa aria-live="polite" para actualizaciones no críticas
Usa role="alert" y aria-live="assertive" para errores
Proporciona texto solo para lectores de pantalla con la clase .sr-only
Usa aria-busy para indicar el estado de carga
Asegura la gestión del foco después de cambios de estado

Temporización del Estado de Carga

Al trabajar con operaciones asíncronas, la temporización de los indicadores de carga puede impactar significativamente la experiencia del usuario. Los spinners o mensajes de carga con mala temporización pueden generar una interfaz brusca, haciendo que la aplicación se sienta lenta o sin respuesta. Esta sección explora estrategias para gestionar la temporización del estado de carga de manera efectiva.

Evitar el Parpadeo de la UI

Para operaciones rápidas, un spinner de carga que aparece brevemente es peor que ningún spinner. Implementa tiempos mínimos de visualización:

<script>
	async function withMinimumDelay(promise, minMs = 400) {
		const startTime = Date.now()
		const result = await promise
		const elapsed = Date.now() - startTime

		if (elapsed < minMs) {
			await new Promise((r) => setTimeout(r, minMs - elapsed))
		}

		return result
	}

	// For operations that might be very fast
	let dataPromise = $derived(withMinimumDelay(fetchData(), 400))
</script>

{#await dataPromise}
	<LoadingSpinner />
{:then data}
	<DataDisplay {data} />
{/await}

Indicador de Carga con Retraso

Para operaciones típicamente rápidas, muestra el estado de carga solo si tarda más de lo esperado:

<script>
	let showLoading = $state(false)
	let loadingTimer = null

	async function fetchWithDelayedLoader() {
		showLoading = false

		// Only show loading after 200ms
		loadingTimer = setTimeout(() => {
			showLoading = true
		}, 200)

		try {
			const response = await fetch('/api/data')
			return response.json()
		} finally {
			clearTimeout(loadingTimer)
		}
	}

	let dataPromise = $derived(fetchWithDelayedLoader())
</script>

{#await dataPromise}
	{#if showLoading}
		<LoadingSpinner />
	{/if}
{:then data}
	<DataDisplay {data} />
{:catch error}
	<ErrorDisplay {error} />
{/await}

Errores Comunes y Soluciones

Al trabajar con los bloques #await de Svelte, los desarrolladores pueden encontrar varios errores comunes que pueden llevar a un rendimiento subóptimo, estados de UI confusos o incluso bugs. Esta sección destaca algunos de estos problemas y proporciona soluciones prácticas para evitarlos.

1. Crear Nuevas Promesas en Cada Renderizado

Error: Crear una nueva promesa dentro del bloque await en cada renderizado provoca solicitudes de red innecesarias y rompe la reactividad.

Solución: Almacena la promesa en una variable o estado derivado para que solo se actualice cuando sea necesario.

<!-- PREFERRED: Store the promise in a variable -->
<script>
	let dataPromise = $derived(fetch('/api/data').then((r) => r.json()))
</script>

<!-- AVOID: This creates a new promise every render cycle -->
{#await fetch('/api/data').then((r) => r.json())}
	<p>Loading...</p>
{:then data}
	<p>{data}</p>
{/await}

{#await dataPromise}
	<p>Loading...</p>
{:then data}
	<p>{data}</p>
{/await}

2. Olvidar el Manejo de Errores

Error: Omitir el manejo de errores en los bloques await puede llevar a rechazos de promesas no manejados y una UI confusa para los usuarios.

Solución: Incluye siempre un bloque {:catch} para manejar los errores de forma elegante e informar al usuario.

<!-- AVOID: Unhandled rejection if promise fails -->
{#await riskyOperation() then result}
	<p>{result}</p>
{/await}

<!-- PREFERRED: Always handle potential errors -->
{#await riskyOperation()}
	<p>Loading...</p>
{:then result}
	<p>{result}</p>
{:catch error}
	<p>Error: {error.message}</p>
{/await}

3. Condiciones de Carrera con Actualizaciones Rápidas

Error: Cuando se disparan múltiples solicitudes asíncronas rápidamente (por ejemplo, el usuario escribiendo en un campo de búsqueda), las solicitudes más lentas pueden resolverse después de las más rápidas, mostrando datos desactualizados.

Solución: Usa AbortController para cancelar solicitudes anteriores y asegurarte de que solo se muestre el resultado más reciente.

<!-- AVOID: Potential race condition -->
<script>
	let query = $state('')

	// Slow request might resolve after a faster one
	let resultsPromise = $derived(fetch(`/api/search?q=${query}`).then((r) => r.json()))
</script>

<!-- PREFERRED: Use AbortController for cancellation -->
<script>
	let query = $state('')
	let controller = null

	async function search(q) {
		// Cancel previous request
		controller?.abort()
		controller = new AbortController()

		try {
			const response = await fetch(`/api/search?q=${q}`, {
				signal: controller.signal
			})
			return response.json()
		} catch (error) {
			if (error.name === 'AbortError') {
				return new Promise(() => {}) // Never resolves
			}
			throw error
		}
	}

	let resultsPromise = $derived(search(query))
</script>

4. No Mostrar el Estado de Carga para Operaciones Rápidas

Error: Las operaciones rápidas pueden hacer que el spinner de carga parpadee brevemente, resultando en una UI inestable.

Solución: Agrega un tiempo mínimo de visualización para los indicadores de carga para asegurar una experiencia de usuario fluida.

<!-- PREFERRED: Add minimum display time -->
<script>
	async function withMinimumDelay(promise, minMs = 300) {
		const [result] = await Promise.all([promise, new Promise((r) => setTimeout(r, minMs))])
		return result
	}

	let dataPromise = $derived(withMinimumDelay(quickOperation()))
</script>

<!-- AVOID: Jumpy UI for fast operations -->
{#await quickOperation()}
	<FullPageSpinner /> <!-- Flashes briefly -->
{:then result}
	<p>{result}</p>
{/await}

5. Fugas de Memoria al Desmontar Componentes

Error: Las operaciones asíncronas pueden intentar actualizar el estado después de que un componente ha sido desmontado, causando fugas de memoria o errores.

Solución: Usa $effect con una función de limpieza para cancelar solicitudes cuando el componente se desmonta o cambian las dependencias. Este es el enfoque moderno de Svelte 5.

<script>
	let userId = $state(1)
	let userData = $state(null)
	let error = $state(null)

	// $effect automatically handles cleanup when:
	// - the component is destroyed
	// - userId changes (before re-running)
	$effect(() => {
		const controller = new AbortController()

		async function loadUser() {
			try {
				const response = await fetch(`/api/users/${userId}`, {
					signal: controller.signal
				})
				userData = await response.json()
			} catch (err) {
				// Ignore abort errors - they're expected during cleanup
				if (err.name !== 'AbortError') {
					error = err
				}
			}
		}

		loadUser()

		// Cleanup function runs before effect re-runs or on unmount
		return () => {
			controller.abort()
		}
	})
</script>

{#if error}
	<p class="error">{error.message}</p>
{:else if userData}
	<p>{userData.name}</p>
{:else}
	<p>Loading...</p>
{/if}

Para casos más simples con promesas $derived, la limpieza es automática: cuando se crea una nueva promesa, Svelte deja de rastrear la anterior:

<script>
	let userId = $state(1)

	// When userId changes, Svelte automatically ignores
	// the result of the previous promise
	let userPromise = $derived(fetch(`/api/users/${userId}`).then((r) => r.json()))
</script>

{#await userPromise}
	<p>Loading...</p>
{:then user}
	<p>{user.name}</p>
{:catch error}
	<p>{error.message}</p>
{/await}

6. No Preservar la Posición de Desplazamiento

Error: Al navegar o actualizar contenido, los usuarios pueden perder su posición de desplazamiento, lo que lleva a una experiencia frustrante.

Solución: Usa la directiva @attach (recomendada para interacciones con el DOM) para restaurar y guardar la posición de desplazamiento, asegurando una navegación fluida y continuidad para los usuarios.

<script>
	let scrollPosition = $state(0)

	// Attachment runs when element mounts - perfect for DOM setup
	function restoreScroll(element) {
		// Restore scroll position on mount
		if (scrollPosition > 0) {
			element.scrollTop = scrollPosition
		}

		// Save scroll position on scroll
		function handleScroll() {
			scrollPosition = element.scrollTop
		}

		element.addEventListener('scroll', handleScroll)

		// Cleanup when element unmounts
		return () => {
			element.removeEventListener('scroll', handleScroll)
		}
	}
</script>

{#await dataPromise}
	<div class="loading">Loading...</div>
{:then data}
	<!-- {@attach} is ideal here: runs on mount, has direct element access -->
	<div class="scrollable-content" {@attach restoreScroll}>
		{#each data.items as item}
			<div>{item.name}</div>
		{/each}
	</div>
{/await}

Alternativa usando $effect (cuando necesitas dependencias reactivas):

<script>
	let scrollPosition = $state(0)
	let container = $state(null)

	function saveScroll() {
		if (container) {
			scrollPosition = container.scrollTop
		}
	}

	// $effect is better when scroll restoration depends on other reactive state
	// e.g., if scrollPosition came from a store or needed to react to route changes
	$effect(() => {
		if (container && scrollPosition > 0) {
			container.scrollTop = scrollPosition
		}
	})
</script>

{#await dataPromise}
	<div class="loading">Loading...</div>
{:then data}
	<div bind:this={container} class="scrollable-content" onscroll={saveScroll}>
		{#each data.items as item}
			<div>{item.name}</div>
		{/each}
	</div>
{/await}

Cuándo usar cuál:

{@attach}: Ideal para interacciones con el DOM autocontenidas donde el elemento es la preocupación principal
$effect: Mejor cuando el comportamiento depende de múltiples valores reactivos o estado externo

Integración con las Funciones Load de SvelteKit

En aplicaciones SvelteKit, la carga de datos típicamente ocurre en las funciones load de +page.js. El bloque #await complementa esto para operaciones del lado del cliente:

<!-- +page.svelte -->
<script>
	let { data } = $props() // Server-loaded data

	// Additional client-side async operations
	let recommendationsPromise = $derived(
		fetch(`/api/recommendations?based_on=${data.product.id}`).then((r) => r.json())
	)
</script>

<!-- Server data is immediately available -->
<h1>{data.product.name}</h1>
<p>{data.product.description}</p>
<p>${data.product.price}</p>

<!-- Client-side enhancement -->
<section class="recommendations">
	<h2>You Might Also Like</h2>

	{#await recommendationsPromise}
		<div class="recommendations-skeleton">
			{#each Array(4) as _}
				<div class="product-skeleton"></div>
			{/each}
		</div>
	{:then recommendations}
		<div class="recommendations-grid">
			{#each recommendations as product}
				<a href="/products/{product.slug}" class="product-card">
					<img src={product.image} alt={product.name} />
					<h3>{product.name}</h3>
					<p>${product.price}</p>
				</a>
			{/each}
		</div>
	{:catch}
		<!-- Silently fail - recommendations are nice-to-have -->
	{/await}
</section>

Integración con TypeScript

Para operaciones asíncronas con seguridad de tipos:

<script lang="ts">
	interface User {
		id: number
		name: string
		email: string
	}

	interface ApiError {
		message: string
		code: string
		status: number
	}

	async function fetchUser(id: number): Promise<User> {
		const response = await fetch(`/api/users/${id}`)
		if (!response.ok) {
			const error: ApiError = await response.json()
			throw error
		}
		return response.json()
	}

	let userId = $state(1)
	let userPromise: Promise<User> = $derived(fetchUser(userId))
</script>

{#await userPromise}
	<p>Loading...</p>
{:then user}
	<!-- user is typed as User -->
	<p>{user.name} - {user.email}</p>
{:catch error}
	<!-- error is typed as unknown by default -->
	{#if typeof error === 'object' && error !== null && 'message' in error}
		<p>{(error as ApiError).message}</p>
	{:else}
		<p>Unknown error occurred</p>
	{/if}
{/await}

Manejo de Errores con Seguridad de Tipos

<script lang="ts">
	function isApiError(error: unknown): error is ApiError {
		return typeof error === 'object' && error !== null && 'status' in error && 'message' in error
	}
</script>

{#await dataPromise}
	<Loading />
{:then data}
	<DataDisplay {data} />
{:catch error}
	{#if isApiError(error)}
		<ApiErrorDisplay status={error.status} message={error.message} />
	{:else if error instanceof Error}
		<GenericError message={error.message} />
	{:else}
		<UnknownError />
	{/if}
{/await}

Resumen de Mejores Prácticas

Siempre maneja los errores — Usa el bloque :catch o envuelve en un <svelte:boundary>
Almacena las promesas en variables — Evita crear nuevas promesas en cada renderizado
Usa $derived para promesas reactivas — Re-fetching automático cuando cambian las dependencias
Aplica debounce a entradas rápidas — Previene llamadas excesivas a la API
Usa AbortController — Cancela solicitudes obsoletas para prevenir condiciones de carrera
Muestra estados de carga significativos — Las pantallas skeleton son mejores que los spinners
Considera los fallos parciales — Usa Promise.allSettled cuando sea apropiado
Optimiza para el rendimiento percibido — Considera las actualizaciones optimistas
Mantén los datos anteriores visibles — Usa patrones stale-while-revalidate
Maneja los timeouts — No hagas esperar a los usuarios indefinidamente
Hazlo accesible — Usa atributos ARIA y anuncios adecuados
Tipifica tus funciones async — TypeScript mejora la mantenibilidad
Usa {@const} para valores calculados — Mantén los templates limpios
Gestiona el tiempo de los indicadores de carga — Evita el parpadeo en operaciones rápidas
Usa la limpieza de $effect para cancelación — Patrón moderno para prevenir fugas de memoria
Aprovecha $effect.pending() — Rastrea promesas pendientes para una UI de carga granular

Referencia Rápida

<!-- Reactive with $derived -->
<script>
	let id = $state(1)
	let dataPromise = $derived(fetchData(id))
</script>

<!-- Full syntax -->
{#await promise}
	<!-- pending -->
{:then value}
	<!-- fulfilled -->
{:catch error}
	<!-- rejected -->
{/await}

<!-- Omit catch -->
{#await promise}
	<!-- pending -->
{:then value}
	<!-- fulfilled -->
{/await}

<!-- Omit pending -->
{#await promise then value}
	<!-- fulfilled -->
{/await}

<!-- Only catch -->
{#await promise catch error}
	<!-- rejected -->
{/await}

<!-- With destructuring -->
{#await promise then { data, meta }}
	<p>{data.title}</p>
{/await}

<!-- Array destructuring -->
{#await promise then [first, second]}
	<p>{first} and {second}</p>
{/await}

<!-- Dynamic import -->
{#await import('./Component.svelte') then { default: Component }}
	<Component />
{/await}

<!-- With @const -->
{#await promise then items}
	{@const total = items.reduce((a, b) => a + b.value, 0)}
	<p>Total: {total}</p>
{/await}

<!-- Track pending count with $effect.pending() -->
{#if $effect.pending()}
	<p>Loading {$effect.pending()} item(s)...</p>
{/if}

Conclusión

El bloque #await representa la respuesta declarativa de Svelte al desafío omnipresente de la gestión de estado asíncrono en las aplicaciones web modernas. Al transformar el patrón imperativo del manejo de promesas —con sus flags de carga manuales, el rastreo del estado de error y las preocupaciones de limpieza— en una estructura de template declarativa, Svelte te permite expresar flujos de trabajo asíncronos complejos con una claridad notable.

La integración con $effect.pending() para rastrear múltiples promesas y el soporte para la desestructuración de valores resueltos demuestra cómo Svelte 5 construye sobre esta base para manejar patrones asíncronos cada vez más sofisticados.

Dominar #await requiere comprender sus diversas formas: la sintaxis completa de tres ramas para estados explícitos de carga/éxito/error, las formas abreviadas para patrones comunes, y la integración con las funciones load del servidor de SvelteKit para datos asíncronos compatibles con SSR.

La clave está en reconocer cuándo el manejo asíncrono declarativo a nivel de template mejora la claridad del código frente a cuándo los enfoques programáticos basados en $effect se adaptan mejor a tu arquitectura. Al combinar #await con límites de error adecuados, rastreo del estado de carga y estado derivado reactivo, puedes construir interfaces resilientes y amigables para el usuario que manejan con gracia la realidad asíncrona del desarrollo web moderno.

Puntos Clave

Los bloques #await manejan declarativamente los estados de las promesas con tres ramas: {#await} para pendiente, {:then} para cumplida y {:catch} para promesas rechazadas
La sintaxis abreviada omite las ramas no utilizadas — {#await promise then value} omite la UI de pendiente, y {#await promise catch error} maneja solo los errores
La desestructuración extrae los valores resueltos directamente: {#await promise then { data, meta }} o {#await promise then [first, second]} para arrays
Las promesas se rastrean automáticamente — cuando la referencia de la promesa cambia, #await vuelve al estado pendiente y espera la nueva promesa
$effect.pending() cuenta las promesas activas globalmente, habilitando indicadores de "cargando N elementos" y el rastreo del estado de carga a nivel de aplicación
Integración con SvelteKit mediante la prop data — las funciones load devuelven promesas resueltas del lado del servidor durante el SSR y transmitidas al cliente para la hidratación
El manejo de errores requiere bloques {:catch} explícitos o límites de error en el componente padre — los rechazos no manejados no muestran automáticamente una UI de error amigable para el usuario
Gestión de promesas a nivel de componente con $state para control programático, $derived para promesas calculadas y $effect para efectos secundarios en la resolución

Ver También

Documentación oficial de Svelte 5 - {#await}
MDN Web Docs - Promesas
Carga de datos en SvelteKit — Carga de datos del lado del servidor con funciones load
$effect.pending() — Rastreo de múltiples promesas pendientes
$state — Estado reactivo para la gestión de promesas
$derived — Promesas calculadas a partir de dependencias reactivas
JavaScript async/await — Comprensión de los patrones asíncronos

UI Asíncrona Declarativa en Svelte 5

El Problema

Gestionar los Estados de una Promesa de Forma Imperativa

Sintaxis Básica

Los Tres Estados de una Promesa

Expresiones Await en Plantillas

Actualizaciones Sincronizadas

Cuándo Usar Cuál

Variaciones de Sintaxis

Flexibilidad para Diferentes Necesidades

Forma Completa: Los Tres Estados

Omitir el Bloque Catch

Omitir el Bloque Pendiente

Solo Capturar Errores

Valores que No Son Promesas

Desestructuración en Bloques Await

Desestructuración de Objetos

Desestructuración de Arrays

Importaciones Dinámicas con Desestructuración

Desestructuración Anidada con Valores Predeterminados

Promesas Reactivas

Re-ejecución Automática

Manejo de Condiciones de Carrera

Usando AbortController

Encapsulando AbortController en un Patrón Reutilizable

Debouncing de Promesas Reactivas

Mantener Datos Anteriores Mientras se Carga

Implementación de Caché Avanzada

Bloques Await Anidados

Dependencias Secuenciales

Carga Paralela con Promise.all

Usa Promise.allSettled para Fallos Parciales

Bloques #await Independientes

Carga Similar a Suspense

Transiciones con Bloques Await

Manejo de Tiempos de Espera

Envoltura Simple de Tiempo de Espera

Combinación de Tiempo de Espera y AbortController

Estrategias de Manejo de Errores

1. Visualización de Errores en Línea

2. Límites de Error con <svelte:boundary>

Uso del snippet pending para la Carga Inicial

Seguimiento del Conteo Pendiente con $effect.pending()

3. Reintento con Retroceso Exponencial y Retroalimentación Visual

4. Objetos de Error Tipados

Uso de @const Dentro de Bloques Await

Patrón de Scroll Infinito

Actualizaciones Optimistas de UI

Envíos de Formularios con Bloques #await

Patrón de Paginación

Consideraciones de Accesibilidad

Temporización del Estado de Carga

Evitar el Parpadeo de la UI

Indicador de Carga con Retraso

Errores Comunes y Soluciones

1. Crear Nuevas Promesas en Cada Renderizado

2. Olvidar el Manejo de Errores

3. Condiciones de Carrera con Actualizaciones Rápidas

4. No Mostrar el Estado de Carga para Operaciones Rápidas

5. Fugas de Memoria al Desmontar Componentes

6. No Preservar la Posición de Desplazamiento

Integración con las Funciones Load de SvelteKit

Integración con TypeScript

Manejo de Errores con Seguridad de Tipos

Resumen de Mejores Prácticas

Referencia Rápida

Conclusión

Puntos Clave

Ver También

Carga Paralela con `Promise.all`

Usa `Promise.allSettled` para Fallos Parciales

Bloques `#await` Independientes

2. Límites de Error con `<svelte:boundary>`

Uso del snippet `pending` para la Carga Inicial

Seguimiento del Conteo Pendiente con `$effect.pending()`

Uso de `@const` Dentro de Bloques Await

Envíos de Formularios con Bloques `#await`