pending() — svelte Function Reference

Architecture documentation for the pending() function in boundary.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 6 called by 1

Entity Profile

ClientRuntime→ Hydration→ pending() — svelte Function Reference

Dependency Diagram

graph TD
  1faf4fc8_402e_578f_4e4f_7e097c01b149["pending()"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec["Boundary"]
  1faf4fc8_402e_578f_4e4f_7e097c01b149 -->|defined in| 928abd29_a193_3303_bc6d_b7d6ce0b17ec
  57ea3d36_da2d_953c_805b_95c169aa039c["pending()"]
  57ea3d36_da2d_953c_805b_95c169aa039c -->|calls| 1faf4fc8_402e_578f_4e4f_7e097c01b149
  faf0e92f_7626_2d66_f7f8_05458f022351["branch()"]
  1faf4fc8_402e_578f_4e4f_7e097c01b149 -->|calls| faf0e92f_7626_2d66_f7f8_05458f022351
  57ea3d36_da2d_953c_805b_95c169aa039c["pending()"]
  1faf4fc8_402e_578f_4e4f_7e097c01b149 -->|calls| 57ea3d36_da2d_953c_805b_95c169aa039c
  2cab0f64_6d19_d981_66e2_d2555c252702["queue_micro_task()"]
  1faf4fc8_402e_578f_4e4f_7e097c01b149 -->|calls| 2cab0f64_6d19_d981_66e2_d2555c252702
  2ec0d2fd_8bbc_b2ba_53ae_f2da02bb3ba5["ensure()"]
  1faf4fc8_402e_578f_4e4f_7e097c01b149 -->|calls| 2ec0d2fd_8bbc_b2ba_53ae_f2da02bb3ba5
  27507f0c_dcab_c3a5_2ce6_5e4b1ef9df3d["pause_effect()"]
  1faf4fc8_402e_578f_4e4f_7e097c01b149 -->|calls| 27507f0c_dcab_c3a5_2ce6_5e4b1ef9df3d
  73cebc52_ca9e_1263_8a9a_afbc3e5f5b01["move_effect()"]
  1faf4fc8_402e_578f_4e4f_7e097c01b149 -->|calls| 73cebc52_ca9e_1263_8a9a_afbc3e5f5b01
  style 1faf4fc8_402e_578f_4e4f_7e097c01b149 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/blocks/boundary.js lines 205–229

	#hydrate_pending_content() {
		const pending = this.#props.pending;
		if (!pending) return;

		this.#pending_effect = branch(() => pending(this.#anchor));

		queue_micro_task(() => {
			var anchor = this.#get_anchor();

			this.#main_effect = this.#run(() => {
				Batch.ensure();
				return branch(() => this.#children(anchor));
			});

			if (this.#pending_count > 0) {
				this.#show_pending_snippet();
			} else {
				pause_effect(/** @type {Effect} */ (this.#pending_effect), () => {
					this.#pending_effect = null;
				});

				this.is_pending = false;
			}
		});
	}