WIP

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

@@ -33,7 +33,7 @@ import { Batch, current_batch } from '../../reactivity/batch.js';
 import { internal_set, source } from '../../reactivity/sources.js';
 import { tag } from '../../dev/tracing.js';
 import { createSubscriber } from '../../../../reactivity/create-subscriber.js';
-import { create_text } from '../operations.js';
+import { create_text, move_effect_before } from '../operations.js';
 import { defer_effect } from '../../reactivity/utils.js';
 
 /**
@@ -94,8 +94,8 @@ export class Boundary {
 	/** @type {Effect | null} */
 	#failed_effect = null;
 
-	/** @type {DocumentFragment | null} */
-	#offscreen_fragment = null;
+	/** @type {Effect | null} */
+	#offscreen_effect = null;
 
 	#local_pending_count = 0;
 	#pending_count = 0;
@@ -212,18 +212,18 @@ export class Boundary {
 		this.#pending_effect = branch(() => pending(this.#anchor));
 
 		queue_micro_task(() => {
-			var fragment = (this.#offscreen_fragment = document.createDocumentFragment());
+			var fragment = document.createDocumentFragment();
 			var anchor = create_text();
 
 			fragment.append(anchor);
 
-			this.#main_effect = this.#run(() => {
+			this.#offscreen_effect = this.#main_effect = this.#run(() => {
 				return branch(() => this.#children(anchor));
 			});
 
 			if (this.#pending_count === 0) {
 				this.#anchor.before(fragment);
-				this.#offscreen_fragment = null;
+				this.#offscreen_effect = null;
 
 				pause_effect(/** @type {Effect} */ (this.#pending_effect), () => {
 					this.#pending_effect = null;
@@ -245,7 +245,8 @@ export class Boundary {
 			});
 
 			if (this.#pending_count > 0) {
-				var fragment = (this.#offscreen_fragment = document.createDocumentFragment());
+				var fragment = document.createDocumentFragment();
+				this.#offscreen_effect = this.#main_effect;
 				move_effect(this.#main_effect, fragment);
 
 				const pending = /** @type {(anchor: Node) => void} */ (this.#props.pending);
@@ -342,9 +343,9 @@ export class Boundary {
 				});
 			}
 
-			if (this.#offscreen_fragment) {
-				this.#anchor.before(this.#offscreen_fragment);
-				this.#offscreen_fragment = null;
+			if (this.#offscreen_effect) {
+				move_effect_before(this.#offscreen_effect, this.#anchor);
+				this.#offscreen_effect = null;
 			}
 		}
 	}