From a9469d0e19db5a639c6c0ab5580343282584983e Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Tue, 24 Sep 2024 15:54:20 +0200
Subject: [PATCH] Make `renderRegions` async

---
 packages/interactivity-router/src/index.ts | 36 ++++++++++++----------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index 6ca61f300bfe8..5b4eb1cddbd15 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -107,20 +107,22 @@ const regionsToVdom: RegionsToVdom = async ( dom, { vdom } = {} ) => {
 };
 
 // Render all interactive regions contained in the given page.
-const renderRegions = ( page: Page ) => {
-	batch( async () => {
-		populateServerData( page.initialData );
-		if ( globalThis.IS_GUTENBERG_PLUGIN ) {
-			if ( navigationMode === 'fullPage' ) {
-				// Once this code is tested and more mature, the head should be updated for region based navigation as well.
-				await updateHead( page.head );
-				const fragment = getRegionRootFragment( document.body );
+const renderRegions = async ( page: Page ) => {
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		if ( navigationMode === 'fullPage' ) {
+			// Once this code is tested and more mature, the head should be updated for region based navigation as well.
+			await updateHead( page.head );
+			const fragment = getRegionRootFragment( document.body );
+			batch( () => {
+				populateServerData( page.initialData );
 				render( page.regions.body, fragment );
-			}
+			} );
 		}
-		if ( navigationMode === 'regionBased' ) {
+	}
+	if ( navigationMode === 'regionBased' ) {
+		const attrName = `data-${ directivePrefix }-router-region`;
+		batch( () => {
 			populateServerData( page.initialData );
-			const attrName = `data-${ directivePrefix }-router-region`;
 			document
 				.querySelectorAll( `[${ attrName }]` )
 				.forEach( ( region ) => {
@@ -128,11 +130,11 @@ const renderRegions = ( page: Page ) => {
 					const fragment = getRegionRootFragment( region );
 					render( page.regions[ id ], fragment );
 				} );
-		}
-		if ( page.title ) {
-			document.title = page.title;
-		}
-	} );
+		} );
+	}
+	if ( page.title ) {
+		document.title = page.title;
+	}
 };
 
 /**
@@ -156,7 +158,7 @@ window.addEventListener( 'popstate', async () => {
 	const pagePath = getPagePath( window.location.href ); // Remove hash.
 	const page = pages.has( pagePath ) && ( await pages.get( pagePath ) );
 	if ( page ) {
-		renderRegions( page );
+		await renderRegions( page );
 		// Update the URL in the state.
 		state.url = window.location.href;
 	} else {