From 645c945a36f19374e7aa8ffd0f06c6506b643543 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Wed, 24 Jan 2024 16:29:44 -0800 Subject: [PATCH 1/3] Break long hydration task in interactivity init --- packages/interactivity/src/init.js | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/packages/interactivity/src/init.js b/packages/interactivity/src/init.js index d749003b86f49d..fd3bf272737b6b 100644 --- a/packages/interactivity/src/init.js +++ b/packages/interactivity/src/init.js @@ -21,15 +21,25 @@ 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 ); + hydrate( vdom, fragment ); + } + } }; From 6ac9d62d41e9f32971b5bf8df37ae73a000f3a6a Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Thu, 25 Jan 2024 09:01:00 -0800 Subject: [PATCH 2/3] Yield to main between toVdom() and hydrate() Co-authored-by: Luis Herranz --- packages/interactivity/src/init.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/interactivity/src/init.js b/packages/interactivity/src/init.js index fd3bf272737b6b..839302c4f8c6b2 100644 --- a/packages/interactivity/src/init.js +++ b/packages/interactivity/src/init.js @@ -39,6 +39,7 @@ export const init = async () => { await yieldToMain(); const fragment = getRegionRootFragment( node ); const vdom = toVdom( node ); + await yieldToMain(); hydrate( vdom, fragment ); } } From cffdb4dd93d962957e7c01e3e236eff7505f6f1a Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Thu, 25 Jan 2024 09:12:19 -0800 Subject: [PATCH 3/3] Update changelog --- packages/interactivity/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index 0c627c9f640c59..49b6b28b91a96f 100644 --- 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