fix: flush effects scheduled during boundary's pending phase

.changeset/ninety-pandas-move.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: flush effects scheduled during boundary's pending phase

packages/svelte/src/internal/client/dom/blocks/boundary.js

@@ -23,7 +23,7 @@ import { queue_micro_task } from '../task.js';
 import * as e from '../../errors.js';
 import * as w from '../../warnings.js';
 import { DEV } from 'esm-env';
-import { Batch, effect_pending_updates } from '../../reactivity/batch.js';
+import { Batch, current_batch, effect_pending_updates } from '../../reactivity/batch.js';
 import { internal_set, source } from '../../reactivity/sources.js';
 import { tag } from '../../dev/tracing.js';
 import { createSubscriber } from '../../../../reactivity/create-subscriber.js';
@@ -259,6 +259,14 @@ export class Boundary {
 				this.#anchor.before(this.#offscreen_fragment);
 				this.#offscreen_fragment = null;
 			}
+
+			const batch = current_batch;
+
+			if (batch) {
+				queue_micro_task(() => {
+					batch.flush();
+				});
+			}
 		}
 	}
 

packages/svelte/tests/runtime-runes/samples/async-attachment/Inner.svelte

@@ -0,0 +1,10 @@
+<script>
+	function renderContent(node) {
+		node.textContent = 'foo';
+	}
+ 
+	const test = await Promise.resolve('foo');
+</script>
+
+<p>{test}</p>
+<div {@attach renderContent}></div>

packages/svelte/tests/runtime-runes/samples/async-attachment/_config.js

@@ -0,0 +1,18 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>toggle</button> <p>foo</p><div>foo</div>');
+
+		const [toggle] = target.querySelectorAll('button');
+		toggle.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>toggle</button>');
+
+		toggle.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>toggle</button> <p>foo</p><div>foo</div>');
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-attachment/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	import Inner from './Inner.svelte';
+
+	let show = $state(true);
+</script>
+
+<svelte:boundary>
+	<button onclick={() => show = !show}>toggle</button>
+	{#if show}
+		<Inner />
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>