diff --git a/packages/runtime-core/__tests__/components/Suspense.spec.ts b/packages/runtime-core/__tests__/components/Suspense.spec.ts
index 421bc0a8e96..77195b394a0 100644
--- a/packages/runtime-core/__tests__/components/Suspense.spec.ts
+++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts
@@ -709,7 +709,7 @@ describe('Suspense', () => {
{{ errorMessage }}
fallback
@@ -983,6 +983,66 @@ describe('Suspense', () => {
expect(serializeInner(root)).toBe(``)
})
+ test('display previous branch when timeout + no fallback slot is provided', async () => {
+ const toggle = ref(false)
+ let resolve = () => {}
+ let promise: Promise
+ function createPromise() {
+ promise = new Promise(r => {
+ resolve = r
+ })
+
+ return promise
+ }
+
+ const Foo = {
+ async setup() {
+ await createPromise()
+ return () => h('div', ['foo'])
+ }
+ }
+
+ const onPending = jest.fn()
+ const onFallback = jest.fn()
+ const onResolve = jest.fn()
+
+ const Comp = {
+ setup() {
+ return () =>
+ h(
+ Suspense,
+ { timeout: 0, onPending, onFallback, onResolve },
+ {
+ default: toggle.value ? h(Foo) : 'other'
+ }
+ )
+ }
+ }
+
+ const root = nodeOps.createElement('div')
+ render(h(Comp), root)
+ expect(serializeInner(root)).toBe(`other`)
+ expect(onPending).toHaveBeenCalledTimes(0)
+ expect(onFallback).toHaveBeenCalledTimes(0)
+ expect(onResolve).toHaveBeenCalledTimes(1)
+
+ toggle.value = true
+ await nextTick()
+ expect(serializeInner(root)).toBe(`other`)
+ expect(onPending).toHaveBeenCalledTimes(1)
+ expect(onFallback).toHaveBeenCalledTimes(0)
+ expect(onResolve).toHaveBeenCalledTimes(1)
+
+ resolve()
+ await promise!
+ await nextTick()
+ await nextTick()
+ expect(serializeInner(root)).toBe(`foo
`)
+ expect(onPending).toHaveBeenCalledTimes(1)
+ expect(onFallback).toHaveBeenCalledTimes(0)
+ expect(onResolve).toHaveBeenCalledTimes(2)
+ })
+
test('branch switch to 3rd branch before resolve', async () => {
const calls: string[] = []
diff --git a/packages/runtime-core/src/components/Suspense.ts b/packages/runtime-core/src/components/Suspense.ts
index 85a2d1755bd..adc539468ed 100644
--- a/packages/runtime-core/src/components/Suspense.ts
+++ b/packages/runtime-core/src/components/Suspense.ts
@@ -4,6 +4,7 @@ import {
VNodeProps,
isSameVNodeType,
openBlock,
+ Comment,
closeBlock,
currentBlock,
createVNode
@@ -516,7 +517,8 @@ function createSuspenseBoundary(
},
fallback(fallbackVNode) {
- if (!suspense.pendingBranch) {
+ // avoid emitting fallback and displaying the fallback node if there isn't any
+ if (!suspense.pendingBranch || fallbackVNode.type === Comment) {
return
}