From 0ae1f1b72119d0442c9aee7c4172b6e60880e800 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 7 Dec 2023 16:53:07 +0800
Subject: [PATCH 1/4] fix(Suspense): properly get anchor when mount fallback
 vnode

---
 packages/runtime-core/src/components/Suspense.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/components/Suspense.ts b/packages/runtime-core/src/components/Suspense.ts
index 5e5521b09be..426ca0cd32c 100644
--- a/packages/runtime-core/src/components/Suspense.ts
+++ b/packages/runtime-core/src/components/Suspense.ts
@@ -582,6 +582,7 @@ function createSuspenseBoundary(
       // invoke @fallback event
       triggerEvent(vnode, 'onFallback')
 
+      const anchor = next(activeBranch!)
       const mountFallback = () => {
         if (!suspense.isInFallback) {
           return
@@ -591,7 +592,7 @@ function createSuspenseBoundary(
           null,
           fallbackVNode,
           container,
-          next(activeBranch!),
+          anchor,
           parentComponent,
           null, // fallback tree will not have suspense context
           isSVG,

From 2db6db57ed6e3a29089abe69f60f71da20c8c44a Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 7 Dec 2023 17:20:34 +0800
Subject: [PATCH 2/4] test: add test case

---
 .../__tests__/components/Suspense.spec.ts     | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/packages/runtime-core/__tests__/components/Suspense.spec.ts b/packages/runtime-core/__tests__/components/Suspense.spec.ts
index d822a992816..38be6ab0799 100644
--- a/packages/runtime-core/__tests__/components/Suspense.spec.ts
+++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts
@@ -1185,6 +1185,72 @@ describe('Suspense', () => {
     expect(calls).toEqual([`one mounted`, `one unmounted`, `two mounted`])
   })
 
+  test('properly mount fallback content', async () => {
+    const makeComp = (name: string, delay = 0) =>
+      defineAsyncComponent(
+        {
+          setup() {
+            return () => h('div', [name])
+          }
+        },
+        delay
+      )
+
+    const One = makeComp('one')
+    const Two = makeComp('two', 20)
+
+    const view = shallowRef(One)
+
+    const Comp = {
+      setup() {
+        return () =>
+          h('div', [
+            h(
+              Suspense,
+              {
+                timeout: 10
+              },
+              {
+                default: h(view.value),
+                fallback: h('div', 'fallback')
+              }
+            ),
+            h('div', 'three')
+          ])
+      }
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    expect(serializeInner(root)).toBe(
+      `<div><div>fallback</div><div>three</div></div>`
+    )
+
+    await deps[0]
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      `<div><div>one</div><div>three</div></div>`
+    )
+
+    view.value = Two
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      `<div><div>one</div><div>three</div></div>`
+    )
+
+    await new Promise(r => setTimeout(r, 10))
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      `<div><div>fallback</div><div>three</div></div>`
+    )
+
+    await deps[1]
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      `<div><div>two</div><div>three</div></div>`
+    )
+  })
+
   // #2214
   // Since suspense renders its own root like a component, it should not patch
   // its content in optimized mode.

From 26073621764b50347375c87ed6f0e2850c1505fe Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 7 Dec 2023 17:44:35 +0800
Subject: [PATCH 3/4] test: add test case

---
 packages/runtime-core/__tests__/components/Suspense.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/runtime-core/__tests__/components/Suspense.spec.ts b/packages/runtime-core/__tests__/components/Suspense.spec.ts
index 38be6ab0799..b1ba6ad67b1 100644
--- a/packages/runtime-core/__tests__/components/Suspense.spec.ts
+++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts
@@ -1185,7 +1185,7 @@ describe('Suspense', () => {
     expect(calls).toEqual([`one mounted`, `one unmounted`, `two mounted`])
   })
 
-  test('properly mount fallback content', async () => {
+  test('ensure the fallback content is in the correct position', async () => {
     const makeComp = (name: string, delay = 0) =>
       defineAsyncComponent(
         {

From 2ee3ca85c0fc5c3ffb2ed3a3a66c5f08a8765c48 Mon Sep 17 00:00:00 2001
From: edison <daiwei521@126.com>
Date: Thu, 7 Dec 2023 19:45:13 +0800
Subject: [PATCH 4/4] Update Suspense.spec.ts

---
 packages/runtime-core/__tests__/components/Suspense.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/runtime-core/__tests__/components/Suspense.spec.ts b/packages/runtime-core/__tests__/components/Suspense.spec.ts
index b1ba6ad67b1..6fec755106a 100644
--- a/packages/runtime-core/__tests__/components/Suspense.spec.ts
+++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts
@@ -1185,7 +1185,7 @@ describe('Suspense', () => {
     expect(calls).toEqual([`one mounted`, `one unmounted`, `two mounted`])
   })
 
-  test('ensure the fallback content is in the correct position', async () => {
+  test('mount the fallback content is in the correct position', async () => {
     const makeComp = (name: string, delay = 0) =>
       defineAsyncComponent(
         {