How to set a state twice in async after props change?

[mitkury]

Let's suppose we load a <Page {id}> component. We might store its content cache locally (e.g localStorage) so we can show it before we fetch the final state from the server based on an ID from props. So if we have a cache - we would need to set the state twice. First - cache, second - result from the fetch. How do you do it in Svelte 5?

Desired flow: when a page ID changes - check if we have a cache and set it while fetching the final content.

Here's a playground link.

<script lang="ts">
	let { pageId } : { pageId: string } = $props();

	async function getPageContent(pageId: number): Promise<string> {
		// Wait for 3 seconds before returning the content
		await new Promise((resolve) => setTimeout(resolve, 3000));
		return pageId;
	}

	let pageContent = $derived.by(async () => {
		return await getPageContent(pageId);
	});

	// @TODO: would it be possible to set pageContent to
	// something before we resolve getPageContent?
	
</script>

<h1>Page {pageId} is selected</h1>

{#await pageContent}
<strong>Loading...</strong>
{:then content }
<strong>{content}</strong>
{/await}

<br /><br />
<small>We're waiting for 3 seconds to "load" 
content of the page after its id changes.</small>

[brunnerh]

You can store the data in a local $state and update that asynchronously. E.g.

<script>
	// ...

	let storage = {}; // local storage stand-in

	let pageContent = $derived.by(async () => {
		const cached = storage[pageId];
		const page = $state({
			content: cached == null
				? undefined
				: (cached + ' (from cache)'),
		});

		const fetchContent = getPageContent(pageId)
				.then(c => storage[pageId] = page.content = c);

		// nothing to show => show #await placeholder
		if (cached == null)
			await fetchContent;

		return page;
	});
</script>

<!-- ... -->

{#await pageContent}
	<strong>Loading...</strong>
{:then page}
	<strong>{page.content}</strong>
{/await}

Playground (did not handle types)

[david-plugge]

Wait, does async work in derived?

[brunnerh]

@mitkury Correct.

@david-plugge You have to be aware of the dependency tracking limitations, only dependencies before the first await will be tracked.

[david-plugge]

Yeah thats what i thought. If we just has async_hooks built into standard JS...

[mitkury]

@brunnerh, could you please explain (or point to docs) what "only dependencies before the first await will be tracked" means?

[brunnerh]

It's e.g. mentioned in in this $effect section with an example:
https://svelte.dev/docs/svelte/$effect#Understanding-dependencies