page transtion with fast props change

[pot-code]

Environment

• Operating System: Darwin
• Node Version: v22.9.0
• Nuxt Version: 3.16.0
• CLI Version: 3.23.0
• Nitro Version: 2.11.6
• Package Manager: pnpm@9.5.0
• Builder: -
• User Config: ssr, devtools, compatibilityDate, css, app, modules, runtimeConfig, vite, vueQuery, ui, icon, elementPlus
• Runtime Modules: @nuxt/eslint@1.2.0, @nuxt/icon@1.11.0, @nuxt/scripts@0.11.2, @nuxt/test-utils@3.17.2, @nuxt/ui@3.0.2, @element-plus/nuxt@1.1.1, @hebilicious/vue-query-nuxt@0.3.0, @vueuse/nuxt@13.0.0
• Build Modules: -

Reproduction

https://codesandbox.io/p/devbox/purple-worker-q927r2?workspaceId=ws_Nd6bGHokakFXXgZBfRPLsD

Describe the bug

Steps to Reproduce:

1. Open the reproduction link.
2. Click on 'page 2' at the top to navigate to the page2 page.
3. The loading animation will not disappear.

The code logic of the page2 page is to call the fetchData function when the page is opened, while setting loading to true and then setting it to false within a short period.

This bug is triggered when a Nuxt page uses a transition with the mode set to out-in. Specifically, when the component's props change rapidly, the code related to DOM operations does not correctly handle the state of the props, resulting in abnormal component display.

Workaround:

1. Set the mode to a value other than out-in.
2. Wrap the component using v-loading with a <ClientOnly> component.
3. Call fetchData within the onMounted callback.

Additional context

No response

Logs

Edit: pick right words

[pot-code]

the temporary fix is to warp the state mutation logic inside onMounted

[yschroe]

@danielroe was able to reproduce it on the latest version of the v3 branch, but can't reproduce it on v4.

See: https://codesandbox.io/p/devbox/page-transtion-bug-forked-t35gzs?workspaceId=ws_4e42udASbaTYu7N4WaSMfe

[danielroe]

nuxtathon closed @yschroe