"use strict";

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=index.js.map