From 5e969f3a8cd1334208364824a0251045b9ba2607 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Wed, 13 Dec 2023 15:06:06 +0100
Subject: [PATCH] Experiment: capture input in suspense placeholder

---
 packages/block-library/src/utils/lazy-load.js | 54 +++++++++++++++++--
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/utils/lazy-load.js b/packages/block-library/src/utils/lazy-load.js
index f88679f8d1227c..312de4164a6586 100644
--- a/packages/block-library/src/utils/lazy-load.js
+++ b/packages/block-library/src/utils/lazy-load.js
@@ -1,14 +1,62 @@
 /**
  * WordPress dependencies
  */
-import { Suspense, lazy } from '@wordpress/element';
+import { Suspense, lazy, useEffect, useState } from '@wordpress/element';
+import { useBlockProps } from '@wordpress/block-editor';
+
+const FallbackEdit = ( { tempContent, setTempContent } ) => {
+	const blockProps = useBlockProps();
+	const onChange = ( e ) => {
+		setTempContent( e.target.value );
+	};
+
+	return (
+		<div { ...blockProps }>
+			<input value={ tempContent } onChange={ onChange } />
+		</div>
+	);
+};
+
+// Sets the block content on mount
+const Init = ( { content, setContent } ) => {
+	useEffect( () => {
+		if ( content.length > 0 ) {
+			setContent( content );
+		}
+	}, [] );
+
+	return null;
+};
+
+// Add delay to the module load for better debugging
+const delay = async ( cb, ms = 0 ) => {
+	if ( ms > 0 ) {
+		await new Promise( ( r ) => setTimeout( r, ms ) );
+	}
+	return await cb();
+};
 
 export default function lazyEdit( cb ) {
 	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-	const Load = lazy( cb );
+	const Load = lazy( () => delay( cb, 3000 ) );
 	return function Edit( props ) {
+		// captures what was typed into the placeholder while loading
+		const [ tempContent, setTempContent ] = useState( '' );
 		return (
-			<Suspense fallback={ null }>
+			<Suspense
+				fallback={
+					<FallbackEdit
+						tempContent={ tempContent }
+						setTempContent={ setTempContent }
+					/>
+				}
+			>
+				<Init
+					content={ tempContent }
+					setContent={ ( content ) =>
+						props.setAttributes( { content } )
+					}
+				/>
 				<Load { ...props } />
 			</Suspense>
 		);