async: easier way to boundary the same component that needs async data #16327
Description
Describe the problem
While exploring the async branch, I commonly wanted a component something like this:
<!--- Post.svelte -->
<script>
const post = await getPost();
</script>
<h1>{post.title}</h1>
<!-- etc... -->However, now I need a <svelte:boundary> in every parent component (assuming I don't want one at the root layout, to minimize the amount of pending state).
Describe the proposed solution
Maybe some way to say "always wrap this component in a boundary"?
<svelte:options boundary={true} />
<script>
const post = await getPost();
</script>
{#snippet pending()}
loading post...
{/snippet}
<h1>{post.title}</h1>
<!-- etc... -->Or, a boundary at the root of a component encapsulates its script block?
<script>
// This is treated as being inside the boundary below
const post = await getPost();
</script>
<svelte:boundary>
{#snippet pending()}
loading post...
{/snippet}
<h1>{post.title}</h1>
<!-- etc... -->
</svelte:boundary>Importance
would make my life easier