add showPendingAfter and showPendingFor

Author: Rich-Harris

packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js

@@ -2,7 +2,7 @@
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
 
-const valid = ['onerror', 'failed', 'pending'];
+const valid = ['onerror', 'failed', 'pending', 'showPendingAfter', 'showPendingFor'];
 
 /**
  * @param {AST.SvelteBoundary} node

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

@@ -4,6 +4,7 @@ import {
 	BOUNDARY_EFFECT,
 	BOUNDARY_SUSPENDED,
 	EFFECT_PRESERVED,
+	EFFECT_RAN,
 	EFFECT_TRANSPARENT,
 	RENDER_EFFECT
 } from '../../constants.js';
@@ -33,6 +34,8 @@ import { queue_boundary_micro_task } from '../task.js';
 import * as e from '../../../shared/errors.js';
 import { DEV } from 'esm-env';
 import { from_async_derived, set_from_async_derived } from '../../reactivity/deriveds.js';
+import { raf } from '../../timing.js';
+import { loop } from '../../loop.js';
 
 const ASYNC_INCREMENT = Symbol();
 const ASYNC_DECREMENT = Symbol();
@@ -69,16 +72,20 @@ var flags = EFFECT_TRANSPARENT | EFFECT_PRESERVED | BOUNDARY_EFFECT;
 /**
  * @param {TemplateNode} node
  * @param {{
- * 	 onerror?: (error: unknown, reset: () => void) => void,
- *   failed?: (anchor: Node, error: () => unknown, reset: () => () => void) => void
- *   pending?: (anchor: Node) => void
+ * 	 onerror?: (error: unknown, reset: () => void) => void;
+ *   failed?: (anchor: Node, error: () => unknown, reset: () => () => void) => void;
+ *   pending?: (anchor: Node) => void;
+ *   showPendingAfter?: number;
+ *   showPendingFor?: number;
  * }} props
  * @param {((anchor: Node) => void)} children
  * @returns {void}
  */
 export function boundary(node, props, children) {
 	var anchor = node;
 
+	var parent_boundary = find_boundary(active_effect);
+
 	block(() => {
 		/** @type {Effect | null} */
 		var main_effect = null;
@@ -106,6 +113,8 @@ export function boundary(node, props, children) {
 		/** @type {Effect[]} */
 		var effects = [];
 
+		var keep_pending_snippet = false;
+
 		/**
 		 * @param {() => void} snippet_fn
 		 * @returns {Effect | null}
@@ -145,6 +154,10 @@ export function boundary(node, props, children) {
 		}
 
 		function unsuspend() {
+			if (keep_pending_snippet || async_count > 0) {
+				return;
+			}
+
 			if ((boundary.f & BOUNDARY_SUSPENDED) !== 0) {
 				boundary.f ^= BOUNDARY_SUSPENDED;
 			}
@@ -184,19 +197,70 @@ export function boundary(node, props, children) {
 			}
 		}
 
+		/**
+		 * @param {boolean} initial
+		 */
+		function show_pending_snippet(initial) {
+			const pending = props.pending;
+
+			if (pending !== undefined) {
+				// TODO can this be false?
+				if (main_effect !== null) {
+					offscreen_fragment = document.createDocumentFragment();
+					move_effect(main_effect, offscreen_fragment);
+				}
+
+				if (pending_effect === null) {
+					pending_effect = branch(() => pending(anchor));
+				}
+
+				// TODO do we want to differentiate between initial render and updates here?
+				if (!initial) {
+					keep_pending_snippet = true;
+
+					var end = raf.now() + (props.showPendingFor ?? 300);
+
+					loop((now) => {
+						if (now >= end) {
+							keep_pending_snippet = false;
+							unsuspend();
+							return false;
+						}
+
+						return true;
+					});
+				}
+			} else if (parent_boundary) {
+				throw new Error('TODO show pending snippet on parent');
+			} else {
+				throw new Error('no pending snippet to show');
+			}
+		}
+
 		// @ts-ignore We re-use the effect's fn property to avoid allocation of an additional field
 		boundary.fn = (/** @type {unknown} */ input, /** @type {any} */ payload) => {
 			if (input === ASYNC_INCREMENT) {
+				// post-init, show the pending snippet after a timeout
+				if ((boundary.f & BOUNDARY_SUSPENDED) === 0 && (boundary.f & EFFECT_RAN) !== 0) {
+					var start = raf.now();
+					var end = start + (props.showPendingAfter ?? 500);
+
+					loop((now) => {
+						if (async_count === 0) return false;
+						if (now < end) return true;
+
+						show_pending_snippet(false);
+					});
+				}
+
 				boundary.f |= BOUNDARY_SUSPENDED;
 				async_count++;
 
-				// TODO post-init, show the pending snippet after a timeout
-
 				return;
 			}
 
 			if (input === ASYNC_DECREMENT) {
-				if (--async_count === 0) {
+				if (--async_count === 0 && !keep_pending_snippet) {
 					unsuspend();
 
 					if (main_effect !== null) {
@@ -307,15 +371,7 @@ export function boundary(node, props, children) {
 
 			if (async_count > 0) {
 				boundary.f |= BOUNDARY_SUSPENDED;
-
-				if (pending) {
-					offscreen_fragment = document.createDocumentFragment();
-					move_effect(main_effect, offscreen_fragment);
-
-					pending_effect = branch(() => pending(anchor));
-				} else {
-					// TODO trigger pending boundary on parent
-				}
+				show_pending_snippet(true);
 			}
 		}
 

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

@@ -0,0 +1,42 @@
+import { flushSync, tick } from 'svelte';
+import { deferred } from '../../../../src/internal/shared/utils.js';
+import { test } from '../../test';
+
+/** @type {ReturnType<typeof deferred>} */
+let d;
+
+export default test({
+	html: `<p>pending</p>`,
+
+	get props() {
+		d = deferred();
+
+		return {
+			promise: d.promise
+		};
+	},
+
+	async test({ assert, target, component, raf }) {
+		d.resolve('hello');
+		await Promise.resolve();
+		await Promise.resolve();
+		await tick();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
+
+		component.promise = (d = deferred()).promise;
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
+
+		raf.tick(500);
+		assert.htmlEqual(target.innerHTML, '<p>pending</p>');
+
+		d.resolve('wheee');
+		await tick();
+		raf.tick(600);
+		assert.htmlEqual(target.innerHTML, '<p>pending</p>');
+
+		raf.tick(800);
+		assert.htmlEqual(target.innerHTML, '<h1>wheee</h1>');
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-pending-timeout/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	let { promise } = $props();
+</script>
+
+<svelte:boundary>
+	<h1>{await promise}</h1>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>