From 60c80d19cca722203ba6149333da8c30303aa072 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 25 Aug 2021 13:14:01 +0200 Subject: [PATCH] Await the next animation frame between core data API calls in __experimentalBatch() --- packages/core-data/src/actions.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js index 6c3d392c31210b..3a35e45f24551e 100644 --- a/packages/core-data/src/actions.js +++ b/packages/core-data/src/actions.js @@ -643,7 +643,16 @@ export function* __experimentalBatch( requests ) { ); }, }; - const resultPromises = requests.map( ( request ) => request( api ) ); + const resultPromises = []; + const awaitNextFrame = () => __unstableAwaitPromise( new Promise( window.requestAnimationFrame ) ); + for ( const request of requests ) { + resultPromises.push( request( api ) ); + + // Each request( api ) is pretty fast, but when there's a lot of them it may block the browser for a few + // seconds. Let's split this long, blocking task into bite-sized pieces scheduled separately to give the + // browser a space for processing other tasks. + yield awaitNextFrame(); + } const [ , ...results ] = yield __unstableAwaitPromise( Promise.all( [ batch.run(), ...resultPromises ] ) );