<Suspense> + <Transition> means mounted() runs too early

[danielroe]

Version

3.2.33

Reproduction link

• stackblitz.com
• SFC Playground

Steps to reproduce

Click the Toggle component button in the reproduction, and observe that a template ref is null rather than defined.

What is expected?

I expect the behaviour with suspense to be the same as the behaviour without suspense.

What is actually happening?

<Suspense> means that the mounted() hook runs before the elements are present in the DOM.

[andysay]

any update?

[michaelpumo]

I also witnessed this issue in Nuxt 3.

On hard load I can retrieve the DOM element via ref and acquire its size using getBoundingClientRect() but when navigating between routes (on the client), the onMounted() appears to run before the DOM is ready and present.

Minimal reproduction:
https://stackblitz.com/edit/nuxt-starter-xssyqg?file=pages%2Findex.vue

This is something to do with transitions.

In my mind, this is a pretty serious bug as at the moment we're having to use setTimeout() hacks in onMounted() in order to ensure the DOM element is retrievable and usable. The timing of this is directly linked to the page transition time.

[richgcook]

It's causing a lot of issues and having to rely on a timeout, which is irregular, is too costly.

[maximilliangeorge]

There's a PR up that claims to fix this issue.
#5952

However, it's been pretty stale for months now. Hope to see it merged soon.

[Triloworld]

Confirm as comment: #5952 (comment)
Is deal breaker . We entirely disable animation and this stop people from migration to new version of framework - it is disabled by this issue on main repo from 3.0.0-rc.13 onwards by default (https://github.com/nuxt/nuxt/releases/tag/v3.0.0-rc.13 and nuxt/framework#8436). Waiting now whole year for pr to be merge.
Right now there is 43 other issues related to page transition feature: https://github.com/nuxt/nuxt/issues?q=is%3Aissue+is%3Aopen+transition
Whole transition feature on nuxt 3 is now depending on this issue to be resolved.

[Triloworld]

@yyx990803 Can you look on this ? Will unblock more people to upgrade Vue 3 and resolve plenty issue. PR exist and issue is mark as important.

[jd-solanki]

Linking #8967

[pikax]

Just to give an update on this, I've created a PR #9388 aimed to fix this

Vue.SFC.Playground.-.Personal.-.Microsoft.Edge.2023-10-12.20-59-54.mp4

It's working, but since this is touching Suspense, I would expect more scrutiny while reviewing, because it can be very easy for this PR break things downstream.