Skip to content

Commit

Permalink
fix(Suspense): fallback should work with transition (#3968)
Browse files Browse the repository at this point in the history
fix #3963
  • Loading branch information
edison1105 authored Jun 21, 2021
1 parent 08e9322 commit 43e2a72
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 1 deletion.
3 changes: 2 additions & 1 deletion packages/runtime-core/src/components/Suspense.ts
Original file line number Diff line number Diff line change
Expand Up @@ -551,6 +551,8 @@ function createSuspenseBoundary(
if (delayEnter) {
activeBranch!.transition!.afterLeave = mountFallback
}
suspense.isInFallback = true

// unmount current active branch
unmount(
activeBranch!,
Expand All @@ -559,7 +561,6 @@ function createSuspenseBoundary(
true // shouldRemove
)

suspense.isInFallback = true
if (!delayEnter) {
mountFallback()
}
Expand Down
63 changes: 63 additions & 0 deletions packages/vue/__tests__/Transition.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1325,6 +1325,69 @@ describe('e2e: Transition', () => {
},
E2E_TIMEOUT
)

// #3963
test(
'Suspense fallback should work with transition',
async () => {
await page().evaluate(() => {
const { createApp, shallowRef, h } = (window as any).Vue

const One = {
template: `<div>{{ msg }}</div>`,
setup() {
return new Promise(_resolve => {
// @ts-ignore
window.resolve = () =>
_resolve({
msg: 'success'
})
})
}
}

createApp({
template: `
<div id="container">
<transition mode="out-in">
<Suspense :timeout="0">
<template #default>
<component :is="view" />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</transition>
</div>
<button id="toggleBtn" @click="click">button</button>
`,
setup: () => {
const view = shallowRef(null)
const click = () => {
view.value = view.value ? null : h(One)
}
return { view, click }
}
}).mount('#app')
})

expect(await html('#container')).toBe('<!---->')

await click('#toggleBtn')
await nextFrame()
expect(await html('#container')).toBe('<div class="">Loading...</div>')

await page().evaluate(() => {
// @ts-ignore
window.resolve()
})

await transitionFinish(duration * 2)
expect(await html('#container')).toBe('<div class="">success</div>')
},
E2E_TIMEOUT
)
})

describe('transition with v-show', () => {
Expand Down

0 comments on commit 43e2a72

Please sign in to comment.