reactive-ui-patterns

In-place updates preserve scroll position by retaining previous data during refreshes using the `.current` property instead of full re-renders. Access `data_query.current` to keep content visible while fetching new data, eliminating jarring page jumps and maintaining user context throughout the update cycle.

Reactive UI patterns use subtle loading indicators like opacity changes instead of full spinners. Show full spinners only on initial load when `.current` is undefined; during subsequent refreshes, apply `class:opacity-60={data_query.loading}` to indicate activity while keeping content interactive and accessible.

Yes. Store your query in a variable, access data via `.current`, and call `query.refresh()` to update content in place. This pattern preserves scroll position, form input values, and component state during saves, delivering seamless inline editing without re-renders or manual reloads.

Reactive patterns surgically refresh content in place using `.current` and `query.refresh()`, avoiding {#await}-based re-renders and full reloads. This maintains scroll position, form state, and user context while providing smooth, responsive UIs instead of jarring content flashes.

Use `.current` when you need to preserve previous data and component state during refreshes—ideal for inline editing, dashboards, and list refinements. Reserve {#await} for initial loads or scenarios where showing a full spinner is acceptable; `.current` prevents content disappearance and maintains user flow.

You need a stored query variable with `.current` and `.loading` properties, access to `query.refresh()` method, and a SvelteKit component structure. This enables surgical refresh calls and subtle loading cues without full re-renders, making real-time dashboards and list refinements feel instant.