Move email editor components out of the engine folder

MAILPOET-6215

packages/js/email-editor/src/components/template-select/async.ts

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState, flushSync } from '@wordpress/element';
+// @ts-expect-error TS7016 Could not find a declaration file for module '@wordpress/priority-queue'
+import { createQueue } from '@wordpress/priority-queue';
+
+const blockPreviewQueue = createQueue();
+
+/**
+ * Renders a component at the next idle time.
+ * @param {*} props
+ */
+export function Async( { children, placeholder } ) {
+	const [ shouldRender, setShouldRender ] = useState( false );
+
+	// In the future, we could try to use startTransition here, but currently
+	// react will batch all transitions, which means all previews will be
+	// rendered at the same time.
+	// https://react.dev/reference/react/startTransition#caveats
+	// > If there are multiple ongoing Transitions, React currently batches them
+	// > together. This is a limitation that will likely be removed in a future
+	// > release.
+
+	useEffect( () => {
+		const context = {};
+		blockPreviewQueue.add( context, () => {
+			// Synchronously run all renders so it consumes timeRemaining.
+			// See https://github.com/WordPress/gutenberg/pull/48238
+			flushSync( () => {
+				setShouldRender( true );
+			} );
+		} );
+		return () => {
+			blockPreviewQueue.cancel( context );
+		};
+	}, [] );
+
+	if ( ! shouldRender ) {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+		return placeholder;
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+	return children;
+}