Programatically set a `<svelte:boundary>` as pending

[Tyler-Petrov]

Describe the problem

It would be nice if the <svelte:boundary> had a property (maybe bindable) that could be used to set it as pending when no async work is being done. I have an auth library that connects to my backend before my site is ready. I want to show a loading state for this, so I use an {#if}{/if} for that. One of the problems is that the loading spinner has jank because it's rendered twice, once for async work and once for auth loading. This is undesirable for me.

Another use case would be to trigger the loading spinner during client navigations.

Describe the proposed solution

<script>
    let isPending = $state(false);
</script>
<svelte:boundary bind:{isPending}>
	<p>{await delayed('hello!')}</p>

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

Something like this would be nice to see. The boundary would still be pending when async work is done, but also when isPending is true

Importance

would make my life easier