fix: settle batch after DOM updates (#17054)

.changeset/loud-chairs-tease.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: settle batch after DOM updates

packages/svelte/src/internal/client/reactivity/batch.js

@@ -196,6 +196,8 @@ export class Batch {
 			flush_queued_effects(target.effects);
 
 			previous_batch = null;
+
+			this.#deferred?.resolve();
 		}
 
 		batch_values = null;
@@ -432,8 +434,6 @@ export class Batch {
 
 		this.committed = true;
 		batches.delete(this);
-
-		this.#deferred?.resolve();
 	}
 
 	/**

packages/svelte/tests/runtime-runes/samples/async-settled-after-dom/_config.js

@@ -0,0 +1,27 @@
+import { settled, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+
+	async test({ assert, target }) {
+		const [shift, update] = target.querySelectorAll('button');
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<button>shift</button><button>update</button><p>hello</p>');
+
+		update.click();
+		const promise = settled();
+
+		await tick();
+		shift.click();
+		await promise;
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>shift</button><button>update</button><p>goodbye</p>'
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-settled-after-dom/main.svelte

@@ -0,0 +1,20 @@
+<script>
+	let text = $state('hello');
+
+	const resolvers = [];
+
+	function push(value) {
+		const { promise, resolve } = Promise.withResolvers();
+		resolvers.push(() => resolve(value));
+		return promise;
+	}
+</script>
+
+<button onclick={() => resolvers.shift()?.()}>shift</button>
+<button onclick={() => text = 'goodbye'}>update</button>
+
+<svelte:boundary>
+	<p>{await push(text)}</p>
+
+	{#snippet pending()}{/snippet}
+</svelte:boundary>