svelte/packages/svelte/tests/runtime-runes/samples/async-effect-pending-nested/main.svelte

<script>
	let value = $state(0);
	let deferreds = [];

	function push(value) {
		const deferred = Promise.withResolvers();
		deferreds.push({ value, deferred });
		return deferred.promise;
	}

	function shift() {
		const d = deferreds.shift();
		d?.deferred.resolve(d.value);
	}
</script>

<button onclick={() => value++}>increment</button>
<button onclick={() => shift()}>shift</button>

<svelte:boundary>
	<svelte:boundary>
		<p>{await push(value)}</p>
		<p>{await push(value)}</p>
		<p>{await push(value)}</p>
		<p>inner pending: {$effect.pending()}</p>
	</svelte:boundary>
	<p>outer pending: {$effect.pending()}</p>

	{#snippet pending()}
		<p>loading...</p>
	{/snippet}
</svelte:boundary>