Skip to content

Async Children of Fragments block earlier sibling elements from being streamed #13283

@alexpdraper

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    - P3: minor bugAn edge case that only affects very specific usage (priority)feat: renderingRelated to prop serialization, html escaping, and framework components (scope)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions