feat: skip pending block for already-resolved promises

.changeset/chatty-ghosts-unite.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: skip pending block for already-resolved promises

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

@@ -139,7 +139,7 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 			} else {
 				// Wait a microtask before checking if we should show the pending state as
 				// the promise might have resolved by the next microtask.
-				queue_micro_task(() => {
+				Promise.resolve().then(() => {
 					if (!resolved) update(PENDING, true);
 				});
 			}

packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/expected.html

@@ -1,4 +1,4 @@
 <div class="a svelte-xyz"></div>
-<div class="d svelte-xyz"></div>
-<div class="f svelte-xyz"></div>
-<div class="h svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="g svelte-xyz"></div>
+<div class="h svelte-xyz"></div>

packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/input.svelte

@@ -1,7 +1,3 @@
-<script>
-	let promise = Promise.resolve();
-</script>
-
 <style>
 	.a ~ .b { color: green; }
 	.a ~ .c { color: green; }
@@ -20,19 +16,20 @@
 
 <div class="a"></div>
 
-{#await promise then value}
+<!-- non-promise, so that something renders initially -->
+{#await true then value}
 	<div class="b"></div>
 {:catch error}
 	<div class="c"></div>
 {/await}
 
-{#await promise}
+{#await true}
 	<div class="d"></div>
 {:catch error}
 	<div class="e"></div>
 {/await}
 
-{#await promise}
+{#await true}
 	<div class="f"></div>
 {:then error}
 	<div class="g"></div>

packages/svelte/tests/css/samples/general-siblings-combinator-await/_config.js

@@ -5,20 +5,20 @@ export default test({
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b ~ .c"',
-			start: { character: 269, column: 1, line: 15 },
-			end: { character: 276, column: 8, line: 15 }
+			start: { character: 217, column: 1, line: 13 },
+			end: { character: 224, column: 8, line: 13 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".c ~ .d"',
-			start: { character: 296, column: 1, line: 16 },
-			end: { character: 303, column: 8, line: 16 }
+			start: { character: 242, column: 1, line: 14 },
+			end: { character: 249, column: 8, line: 14 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b ~ .d"',
-			start: { character: 323, column: 1, line: 17 },
-			end: { character: 330, column: 8, line: 17 }
+			start: { character: 267, column: 1, line: 15 },
+			end: { character: 274, column: 8, line: 15 }
 		}
 	]
 });

packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.css

@@ -7,6 +7,6 @@
 	.a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
 
 	/* no match */
-	/* (unused) .b ~ .c { color: green; }*/
-	/* (unused) .c ~ .d { color: green; }*/
-	/* (unused) .b ~ .d { color: green; }*/
+	/* (unused) .b ~ .c { color: red; }*/
+	/* (unused) .c ~ .d { color: red; }*/
+	/* (unused) .b ~ .d { color: red; }*/

packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.html

@@ -1,3 +1,3 @@
 <div class="a svelte-xyz"></div>
-<div class="b svelte-xyz"></div>
-<div class="e svelte-xyz"></div>
+<div class="c svelte-xyz"></div>
+<div class="e svelte-xyz"></div>

packages/svelte/tests/css/samples/general-siblings-combinator-await/input.svelte

@@ -1,6 +1,4 @@
-<script>
-	let promise = Promise.resolve();
-</script>
+
 
 <style>
 	.a ~ .b { color: green; }
@@ -12,14 +10,15 @@
 	.a ~ .e { color: green; }
 
 	/* no match */
-	.b ~ .c { color: green; }
-	.c ~ .d { color: green; }
-	.b ~ .d { color: green; }
+	.b ~ .c { color: red; }
+	.c ~ .d { color: red; }
+	.b ~ .d { color: red; }
 </style>
 
 <div class="a"></div>
 
-{#await promise}
+<!-- non-promise, so that something renders initially -->
+{#await true}
 	<div class="b"></div>
 {:then value}
 	<div class="c"></div>

packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/expected.html

@@ -1,4 +1,4 @@
 <div class="a svelte-xyz"></div>
-<div class="d svelte-xyz"></div>
-<div class="f svelte-xyz"></div>
-<div class="h svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="g svelte-xyz"></div>
+<div class="h svelte-xyz"></div>

packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/input.svelte

@@ -1,7 +1,3 @@
-<script>
-	let promise = Promise.resolve();
-</script>
-
 <style>
 	.a + .b { color: green; }
 	.a + .c { color: green; }
@@ -20,21 +16,22 @@
 
 <div class="a"></div>
 
-{#await promise then value}
+<!-- non-promise, so that something renders initially -->
+{#await true then value}
 	<div class="b"></div>
 {:catch error}
 	<div class="c"></div>
 {/await}
 
-{#await promise}
+{#await true}
 	<div class="d"></div>
 {:catch error}
 	<div class="e"></div>
 {/await}
 
-{#await promise}
+{#await true}
 	<div class="f"></div>
-{:then error}
+{:then value}
 	<div class="g"></div>
 {/await}
 

packages/svelte/tests/css/samples/siblings-combinator-await/_config.js

@@ -5,26 +5,26 @@ export default test({
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".a + .e"',
-			start: { character: 242, column: 1, line: 14 },
-			end: { character: 249, column: 8, line: 14 }
+			start: { character: 188, column: 1, line: 10 },
+			end: { character: 195, column: 8, line: 10 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b + .c"',
-			start: { character: 269, column: 1, line: 15 },
-			end: { character: 276, column: 8, line: 15 }
+			start: { character: 213, column: 1, line: 11 },
+			end: { character: 220, column: 8, line: 11 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".c + .d"',
-			start: { character: 296, column: 1, line: 16 },
-			end: { character: 303, column: 8, line: 16 }
+			start: { character: 238, column: 1, line: 12 },
+			end: { character: 245, column: 8, line: 12 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b + .d"',
-			start: { character: 323, column: 1, line: 17 },
-			end: { character: 330, column: 8, line: 17 }
+			start: { character: 263, column: 1, line: 13 },
+			end: { character: 270, column: 8, line: 13 }
 		}
 	]
 });

packages/svelte/tests/css/samples/siblings-combinator-await/expected.css

@@ -6,7 +6,7 @@
 	.d.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
 
 	/* no match */
-	/* (unused) .a + .e { color: green; }*/
-	/* (unused) .b + .c { color: green; }*/
-	/* (unused) .c + .d { color: green; }*/
-	/* (unused) .b + .d { color: green; }*/
+	/* (unused) .a + .e { color: red; }*/
+	/* (unused) .b + .c { color: red; }*/
+	/* (unused) .c + .d { color: red; }*/
+	/* (unused) .b + .d { color: red; }*/

packages/svelte/tests/css/samples/siblings-combinator-await/expected.html

@@ -1,3 +1,3 @@
 <div class="a svelte-xyz"></div>
-<div class="b svelte-xyz"></div>
-<div class="e svelte-xyz"></div>
+<div class="c svelte-xyz"></div>
+<div class="e svelte-xyz"></div>

packages/svelte/tests/css/samples/siblings-combinator-await/input.svelte

@@ -1,7 +1,3 @@
-<script>
-	let promise = Promise.resolve();
-</script>
-
 <style>
 	.a + .b { color: green; }
 	.a + .c { color: green; }
@@ -11,15 +7,16 @@
 	.d + .e { color: green; }
 
 	/* no match */
-	.a + .e { color: green; }
-	.b + .c { color: green; }
-	.c + .d { color: green; }
-	.b + .d { color: green; }
+	.a + .e { color: red; }
+	.b + .c { color: red; }
+	.c + .d { color: red; }
+	.b + .d { color: red; }
 </style>
 
 <div class="a"></div>
 
-{#await promise}
+<!-- non-promise, so that something renders initially -->
+{#await true}
 	<div class="b"></div>
 {:then value}
 	<div class="c"></div>

packages/svelte/tests/runtime-legacy/samples/await-block-func-function/_config.js

@@ -7,10 +7,6 @@ export default test({
 		};
 	},
 
-	html: `
-		Waiting...
-	`,
-
 	async test({ assert, component, target }) {
 		await (component.thePromise = Promise.resolve({ func: 12345 }));
 

packages/svelte/tests/runtime-legacy/samples/await-catch-no-expression/_config.js

@@ -13,11 +13,6 @@ export default test({
 		return { thePromise: deferred.promise };
 	},
 
-	html: `
-		<br />
-		<p>the promise is pending</p>
-	`,
-
 	async test({ assert, component, target }) {
 		deferred.resolve(42);
 
@@ -27,6 +22,7 @@ export default test({
 
 		deferred = create_deferred();
 		component.thePromise = deferred.promise;
+		await Promise.resolve();
 
 		assert.htmlEqual(target.innerHTML, '<br /><p>the promise is pending</p>');
 

packages/svelte/tests/runtime-legacy/samples/await-conservative-update/_config.js

@@ -2,10 +2,6 @@ import { test } from '../../test';
 import { sleep } from './sleep.js';
 
 export default test({
-	html: `
-		<p>loading...</p>
-	`,
-
 	test({ assert, target }) {
 		return sleep(50).then(() => {
 			assert.htmlEqual(

packages/svelte/tests/runtime-legacy/samples/await-containing-if/_config.js

@@ -13,10 +13,6 @@ export default test({
 		return { thePromise: deferred.promise, show: true };
 	},
 
-	html: `
-		<div><p>loading...</p></div>
-	`,
-
 	test({ assert, component, target }) {
 		deferred.resolve(42);
 

packages/svelte/tests/runtime-legacy/samples/await-in-each/_config.js

@@ -19,10 +19,6 @@ export default test({
 		return { items };
 	},
 
-	html: `
-		<p>a title: loading...</p>
-	`,
-
 	test({ assert, target }) {
 		fulfil(42);
 

packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/_config.js

@@ -1,7 +1,6 @@
 import { test } from '../../test';
 
 export default test({
-	html: 'Loading...',
 	async test({ assert, component, target }) {
 		await component.test();
 

packages/svelte/tests/runtime-legacy/samples/await-set-simultaneous-reactive/_config.js

@@ -1,9 +1,8 @@
 import { test } from '../../test';
 
 export default test({
-	html: '<p>wait for it...</p>',
 	test({ assert, component, target }) {
-		return component.promise.then(async () => {
+		return component.promise.then(() => {
 			assert.htmlEqual(
 				target.innerHTML,
 				`

packages/svelte/tests/runtime-legacy/samples/await-set-simultaneous/_config.js

@@ -7,6 +7,7 @@ export default test({
 		});
 
 		component.promise = promise;
+		await Promise.resolve();
 
 		assert.htmlEqual(target.innerHTML, '<p>wait for it...</p>');
 

packages/svelte/tests/runtime-legacy/samples/await-then-blowback-reactive/_config.js

@@ -3,8 +3,6 @@ import { ok, test } from '../../test';
 
 export default test({
 	async test({ assert, component, target }) {
-		assert.htmlEqual(target.innerHTML, 'Loading...');
-
 		await component.promise;
 		await Promise.resolve();
 		const span = target.querySelector('span');

packages/svelte/tests/runtime-legacy/samples/await-then-catch-anchor/_config.js

@@ -13,15 +13,11 @@ export default test({
 		return { thePromise: deferred.promise };
 	},
 
-	html: `
-		<div><p>loading...</p></div>
-	`,
-
 	test({ assert, component, target }) {
 		deferred.resolve(42);
 
 		return deferred.promise
-			.then(() => {
+			.then(async () => {
 				assert.htmlEqual(
 					target.innerHTML,
 					`
@@ -32,6 +28,7 @@ export default test({
 				deferred = create_deferred();
 
 				component.thePromise = deferred.promise;
+				await Promise.resolve();
 
 				assert.htmlEqual(target.innerHTML, '<div><p>loading...</p></div>');
 

packages/svelte/tests/runtime-legacy/samples/await-then-catch-event/_config.js

@@ -15,10 +15,6 @@ export default test({
 		};
 	},
 
-	html: `
-		<p>loading...</p>
-	`,
-
 	test({ assert, component, target, window }) {
 		deferred.resolve(42);