Interactivity API: Break up long hydration task in interactivity init (…

…#58227) * Break long hydration task in interactivity init * Yield to main between toVdom() and hydrate() Co-authored-by: Luis Herranz <[email protected]> * Update changelog --------- Co-authored-by: Luis Herranz <[email protected]>
WordPress · Jan 26, 2024 · 8131c43 · 8131c43
1 parent 3a0f734
commit 8131c43
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Break up init with yielding to main to prevent long task from hydration. ([#58227](https://github.com/WordPress/gutenberg/pull/58227))
+
 ## 4.0.0 (2024-01-24)
 
 ### Enhancements

diff --git a/packages/interactivity/src/init.js b/packages/interactivity/src/init.js
@@ -21,15 +21,26 @@ export const getRegionRootFragment = ( region ) => {
 	return regionRootFragments.get( region );
 };
 
+function yieldToMain() {
+	return new Promise( ( resolve ) => {
+		// TODO: Use scheduler.yield() when available.
+		setTimeout( resolve, 0 );
+	} );
+}
+
 // Initialize the router with the initial DOM.
 export const init = async () => {
-	document
-		.querySelectorAll( `[data-${ directivePrefix }-interactive]` )
-		.forEach( ( node ) => {
-			if ( ! hydratedIslands.has( node ) ) {
-				const fragment = getRegionRootFragment( node );
-				const vdom = toVdom( node );
-				hydrate( vdom, fragment );
-			}
-		} );
+	const nodes = document.querySelectorAll(
+		`[data-${ directivePrefix }-interactive]`
+	);
+
+	for ( const node of nodes ) {
+		if ( ! hydratedIslands.has( node ) ) {
+			await yieldToMain();
+			const fragment = getRegionRootFragment( node );
+			const vdom = toVdom( node );
+			await yieldToMain();
+			hydrate( vdom, fragment );
+		}
+	}
 };