fix: batch synchronous invalidate invocations (#10145)

fixes #10142

Author: gtm-nayan

.changeset/khaki-doors-flow.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: batch synchronous invalidate invocations

packages/kit/src/runtime/client/client.js

@@ -153,6 +153,7 @@ export function create_client(app, target) {
 		// but batch multiple synchronous invalidations.
 		pending_invalidate = pending_invalidate || Promise.resolve();
 		await pending_invalidate;
+		if (!pending_invalidate) return;
 		pending_invalidate = null;
 
 		const url = new URL(location.href);

packages/kit/test/apps/basics/src/routes/load/invalidation/multiple-batched/+page.js

@@ -0,0 +1,8 @@
+export const ssr = false;
+
+let count = 0;
+
+export function load({ depends }) {
+	depends('multiple:invalidations-go-brr');
+	return { count: count++ };
+}

packages/kit/test/apps/basics/src/routes/load/invalidation/multiple-batched/+page.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { invalidate } from '$app/navigation';
+
+	export let data;
+</script>
+
+<div>
+	<button
+		id="multiple-batched"
+		on:click={(event) => {
+			const btn = event.currentTarget;
+			invalidate('multiple:invalidations-go-brr');
+			invalidate('multiple:invalidations-go-brr');
+
+			Promise.resolve()
+				.then(() => invalidate('multiple:invalidations-go-brr'))
+				.then(() => {
+					btn.dataset.done = 'true';
+				});
+		}}>{data.count}</button
+	>
+</div>

packages/kit/test/apps/basics/test/client.test.js

@@ -436,6 +436,16 @@ test.describe('Invalidation', () => {
 		await expect(page.getByText('layout: 4, page: 4')).toBeVisible();
 	});
 
+	test('multiple synchronous invalidations are batched', async ({ page }) => {
+		await page.goto('/load/invalidation/multiple-batched');
+		const btn = page.locator('#multiple-batched');
+		await expect(btn).toHaveText('0');
+
+		await btn.click();
+		await expect(btn).toHaveAttribute('data-done', 'true');
+		await expect(btn).toHaveText('2');
+	});
+
 	test('invalidateAll persists through redirects', async ({ page }) => {
 		await page.goto('/load/invalidation/multiple/redirect');
 		await page.locator('button.redirect').click();