Try async mode in the data module

WordPress · Dec 21, 2018 · 8b9d156 · 8b9d156
1 parent c123f1d
commit 8b9d156
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 25 deletions.
diff --git a/packages/data/src/components/async-mode-provider/index.js b/packages/data/src/components/async-mode-provider/index.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const { Consumer, Provider } = createContext( false );
+
+export const AsyncModeConsumer = Consumer;
+
+export default Provider;
diff --git a/packages/data/src/components/with-select/index.js b/packages/data/src/components/with-select/index.js
@@ -9,6 +9,33 @@ import { createHigherOrderComponent } from '@wordpress/compose';
  * Internal dependencies
  */
 import { RegistryConsumer } from '../registry-provider';
+import { AsyncModeConsumer } from '../async-mode-provider';
+
+const waitingList = [];
+const componentsMap = new WeakMap();
+let isRunning = false;
+const runWaitingList = () => {
+	if ( waitingList.length === 0 ) {
+		isRunning = false;
+		return;
+	}
+	const next = waitingList.shift();
+	next();
+	window.requestAnimationFrame( runWaitingList );
+};
+
+const addToWaitingList = ( component, item ) => {
+	if ( componentsMap.has( component ) ) {
+		waitingList[ componentsMap.get( component ) ] = item;
+	} else {
+		componentsMap.set( component, waitingList.length );
+		waitingList.push( item );
+	}
+	if ( ! isRunning ) {
+		isRunning = true;
+		window.requestAnimationFrame( runWaitingList );
+	}
+};
 
 /**
  * Higher-order component used to inject state-derived props using registered
@@ -137,7 +164,13 @@ const withSelect = ( mapSelectToProps ) => createHigherOrderComponent( ( Wrapped
 		}
 
 		subscribe( registry ) {
-			this.unsubscribe = registry.subscribe( this.onStoreChange );
+			this.unsubscribe = registry.subscribe( () => {
+				if ( this.props.isAsync ) {
+					addToWaitingList( this, this.onStoreChange );
+				} else {
+					this.onStoreChange();
+				}
+			} );
 		}
 
 		render() {
@@ -146,14 +179,19 @@ const withSelect = ( mapSelectToProps ) => createHigherOrderComponent( ( Wrapped
 	}
 
 	return ( ownProps ) => (
-		<RegistryConsumer>
-			{ ( registry ) => (
-				<ComponentWithSelect
-					ownProps={ ownProps }
-					registry={ registry }
-				/>
+		<AsyncModeConsumer>
+			{ ( isAsync ) => (
+				<RegistryConsumer>
+					{ ( registry ) => (
+						<ComponentWithSelect
+							ownProps={ ownProps }
+							registry={ registry }
+							isAsync={ isAsync }
+						/>
+					) }
+				</RegistryConsumer>
 			) }
-		</RegistryConsumer>
+		</AsyncModeConsumer>
 	);
 }, 'withSelect' );
 

diff --git a/packages/data/src/index.js b/packages/data/src/index.js
@@ -12,6 +12,7 @@ import * as plugins from './plugins';
 export { default as withSelect } from './components/with-select';
 export { default as withDispatch } from './components/with-dispatch';
 export { default as RegistryProvider, RegistryConsumer } from './components/registry-provider';
+export { default as AsyncModeProvider } from './components/async-mode-provider';
 export { createRegistry } from './registry';
 export { plugins };
 

diff --git a/packages/editor/src/components/block-list/index.js b/packages/editor/src/components/block-list/index.js
@@ -14,7 +14,7 @@ import {
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { withSelect, withDispatch, AsyncModeProvider } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
 /**
@@ -185,22 +185,24 @@ class BlockList extends Component {
 		} = this.props;
 
 		return (
-			<div className="editor-block-list__layout">
-				{ map( blockClientIds, ( clientId, blockIndex ) => (
-					<BlockListBlock
-						key={ 'block-' + clientId }
-						index={ blockIndex }
-						clientId={ clientId }
-						blockRef={ this.setBlockRef }
-						onSelectionStart={ this.onSelectionStart }
-						rootClientId={ rootClientId }
-						isFirst={ blockIndex === 0 }
-						isLast={ blockIndex === blockClientIds.length - 1 }
-						isDraggable={ isDraggable }
-					/>
-				) ) }
-				<BlockListAppender rootClientId={ rootClientId } />
-			</div>
+			<AsyncModeProvider value={ true }>
+				<div className="editor-block-list__layout">
+					{ map( blockClientIds, ( clientId, blockIndex ) => (
+						<BlockListBlock
+							key={ 'block-' + clientId }
+							index={ blockIndex }
+							clientId={ clientId }
+							blockRef={ this.setBlockRef }
+							onSelectionStart={ this.onSelectionStart }
+							rootClientId={ rootClientId }
+							isFirst={ blockIndex === 0 }
+							isLast={ blockIndex === blockClientIds.length - 1 }
+							isDraggable={ isDraggable }
+						/>
+					) ) }
+					<BlockListAppender rootClientId={ rootClientId } />
+				</div>
+			</AsyncModeProvider>
 		);
 	}
 }