Reactive UI Patterns

Reactive UI Patterns

Quick Start

<script lang="ts">
	const data_query = get_data(); // Store in variable for .current access

	async function save(id: string, value: string) {
		await update_data({ id, value });
		await data_query.refresh(); // Updates in place!
	}
</script>

{#if data_query.error}
	<p>Error loading data</p>
{:else if data_query.loading && data_query.current === undefined}
	<p>Loading...</p>
{:else}
	{@const items = data_query.current ?? []}
	<div class:opacity-60={data_query.loading}>
		{#each items as item}<!-- Content updates smoothly -->{/each}
	</div>
{/if}

Core Principles

• Store queries: const query = get_data() enables .current property access
• Use .current: Prevents page jumps, keeps scroll position during updates
• Initial load only: Show spinner when .current === undefined, not on every refresh
• Avoid {#await}: Causes jarring page reloads - use stored query pattern instead

Reference Files

• current-property.md - Deep dive on .current property
• anti-patterns.md - Common mistakes to avoid
• examples.md - Real-world implementation examples