Day 17 $state.eager
When async work is happening in your Svelte app, the UI waits for everything to settle before updating — like Santa's reindeer moving in perfect sync. But sometimes you want immediate feedback!
Imagine Santa's naughty-and-nice list with tabs. When you click a tab to switch views, async data fetching begins. Without $state.eager, the active tab indicator won't update until the data loads — leaving users confused about whether their click registered.
Enter $state.eager(value)! This rune tells Svelte: "Give me the latest value right now, even if async work is still in progress." Wrap your state reference with it, and the UI updates instantly while the data loads in the background.
Use this sparingly — only for providing immediate visual feedback in response to user actions. In most cases, letting Svelte coordinate updates provides a smoother experience. But for navigation indicators, tab switches, and loading states, $state.eager is the perfect gift!