Day 18 fork
Yesterday we used $state.eager to show immediate feedback when switching tabs. But what if we could go even further — preloading data before the user even clicks?
In SvelteKit, when you hover over a link, data fetching starts automatically because the framework assumes you're about to navigate. The fork function brings this same magic to your own components!
Import fork from svelte and pass it a function that modifies state. The state changes happen in an off-screen DOM — fetching starts, but nothing visually changes yet. When the user commits to the action (like clicking), call fork.commit() and the pre-loaded changes apply instantly.
The result? Hover over a tab for a couple seconds, then click — and the content appears immediately! If the user navigates elsewhere instead, call fork.discard() to clean up. It's like Santa's elves preparing gifts in a secret workshop, ready to deliver the moment you ask!