ViewTransitions animations do not work with Server Islands

[jonaspm]

Astro Info

ViewTransitions animations do break when server:defer is used.

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

Edge

Describe the Bug

ViewTransitions animations do break when server:defer is used.

What's the expected result?

Animations work like in here:
https://spotify-astro-transitions.vercel.app/

Just add server:defer to a component from the example repo and animations won't work.

Link to Minimal Reproducible Example

https://github.com/jonaspm/spotify-astro-transitions

https://stackblitz.com/~/github.com/jonaspm/spotify-astro-transitions

Participation

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

[apatel369]

@jonaspm Your repo uses Astro v3 where server components are not supported. Please provide a reproducible example with a supported Astro version. https://astro.build/blog/astro-4120/

[github-actions]

Hello @jonaspm. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[jonaspm]

Please reopen, here is the repository, I have forked and updated to latest dependency versions:

Repo: https://github.com/jonaspm/spotify-astro-transitions

StackBlitz: https://stackblitz.com/~/github.com/jonaspm/spotify-astro-transitions

[jonaspm]

Add or remove server:defer to the file and line: src/pages/index.astro:22.
See attached image as reference:

[martrapp]

Hi @jonaspm 👋🏼, I’m afraid what you’re aiming for can't work. By the time the server islands load, it’s too late for them to participate in the view transition. When using view transitions, you transitioned already to the new page before the first island will load.

[martrapp]

Hi @jonaspm 👋🏼, I close this issue because we can not meet your expectations. The behavior you observe also matches that of server islands in combination with browser-native cross-document view transitions.

A HTML element that should participate in view transitions must be present in the DOM when the transition starts. You can't achieve this with server islands. Maybe you can craft a custom solution for your use case by redefining the loader within a listener to the astro:before-preparation event.