Async Children of Fragments block earlier sibling elements from being streamed

[alexpdraper]

Astro Info

N/A — see the minimum reproducible example

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When streaming a response, if there are any promises inside of a fragment, then none of the elements in that fragment are rendered until after the promise resolves.

<Fragment>
	<p>
		I should show up before the promise resolves, but I don’t!
	</p>
	{promise.then(() => (<p>I show up after the promise resolves</p>))}
</Fragment>

Parent elements don’t normally wait for all their children, if instead of a fragment, we use a div then the first element renders right away.

<div>
	<p>
		I should show up before the promise resolves, and I do!
	</p>
	{promise.then(() => (<p>I show up after the promise resolves</p>))}
</div>

What's the expected result?

Children of fragments should not wait for sibling elements that return promises to be resolved before being streamed in the response.

<!-- This here -->
<Fragment>
	<p>
		I should show up before the promise resolves, but I don’t!
	</p>
	{promise.then(() => (<p>I show up after the promise resolves</p>))}
</Fragment>

<!-- And this here should work the same -->
<p>
	I should show up before the promise resolves, but I don’t!
</p>
{promise.then(() => (<p>I show up after the promise resolves</p>))}

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-vqmrwtqv?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.