import { jsx } from "react/jsx-runtime";
import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
import {
  privateApis as componentsPrivateApis,
  ProgressBar
} from "@wordpress/components";
import { store as coreStore } from "@wordpress/core-data";
import { useSelect } from "@wordpress/data";
import { unlock } from "../../lock-unlock";
import { useStylesPreviewColors } from "../global-styles/hooks";
const { Theme } = unlock(componentsPrivateApis);
const { useGlobalStyle } = unlock(blockEditorPrivateApis);
function CanvasLoader({ id }) {
  const [fallbackIndicatorColor] = useGlobalStyle("color.text");
  const [backgroundColor] = useGlobalStyle("color.background");
  const { highlightedColors } = useStylesPreviewColors();
  const indicatorColor = highlightedColors[0]?.color ?? fallbackIndicatorColor;
  const { elapsed, total } = useSelect((select) => {
    const selectorsByStatus = select(coreStore).countSelectorsByStatus();
    const resolving = selectorsByStatus.resolving ?? 0;
    const finished = selectorsByStatus.finished ?? 0;
    return {
      elapsed: finished,
      total: finished + resolving
    };
  }, []);
  return /* @__PURE__ */ jsx("div", { className: "edit-site-canvas-loader", children: /* @__PURE__ */ jsx(Theme, { accent: indicatorColor, background: backgroundColor, children: /* @__PURE__ */ jsx(ProgressBar, { id, max: total, value: elapsed }) }) });
}
export {
  CanvasLoader as default
};
//# sourceMappingURL=index.js.map
