@wordpress/block-editor
Version:
51 lines (46 loc) • 1.42 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Async = Async;
var _element = require("@wordpress/element");
var _priorityQueue = require("@wordpress/priority-queue");
/**
* WordPress dependencies
*/
const blockPreviewQueue = (0, _priorityQueue.createQueue)();
/**
* Renders a component at the next idle time.
* @param {*} props
*/
function Async({
children,
placeholder
}) {
const [shouldRender, setShouldRender] = (0, _element.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.
(0, _element.useEffect)(() => {
const context = {};
blockPreviewQueue.add(context, () => {
// Synchronously run all renders so it consumes timeRemaining.
// See https://github.com/WordPress/gutenberg/pull/48238
(0, _element.flushSync)(() => {
setShouldRender(true);
});
});
return () => {
blockPreviewQueue.cancel(context);
};
}, []);
if (!shouldRender) {
return placeholder;
}
return children;
}
//# sourceMappingURL=async.js.map