Fix hydration on slow connection

[bluwy]

Changes

Fix #8178

This implements a <!--astro:end--> comment marker added as the last child of the astro-island tag, used to detect if the children is ready for hydration.

As the comment marker could risk being stripped by HTML minifiers, I also added a fallback DOMContentLoaded listener to hydrate if it's triggered.

The downside with this approach is the increased code size for the astro-island component: 3053 chars -> 3362 chars.

Testing

Tested manually with the repro in #8178. It's a bit hard to create a test for this without making it flaky.

Docs

n/a. We currently don't document at the very specific time when we start hydrating.

[changeset-bot]

🦋 Changeset detected

Latest commit: 33a019c

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[bluwy]

Actually I need to benchmark multiple islands too to confirm it doesn’t stall them altogether. Marking as draft.

[bluwy]

I did some tests, it actually stalled all islands before rendering, which isn't a great experience for those on poor connections who have to wait for the entire page to load before they can interact with it. I switched to something similar to Nate's idea instead, adding a trailing child script to emit an event to signal the parent island that it's loaded. Wish there's something like DOMContentLoaded but for partial dom nodes instead.

Update: Uses Nate's idea of a comment marker completely, and a fallback DOMContentLoaded listener.

[bluwy]

This is ready for review. I updated the PR description of what this PR does now.

[matthewp]

Pretty clever solution!