synapse-react-client/dist/components/LoadingScreen/LoadingScreen.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsx as r, jsxs as n, Fragment as d } from "react/jsx-runtime";
import { useEffect as b } from "react";
import { Backdrop as p, Box as x, Typography as o, Button as h, LinearProgress as c } from "@mui/material";
import '../../style/components/_spinner.css';/* empty css                                   */
const C = /* @__PURE__ */ r("div", { className: "bar-loader", children: /* @__PURE__ */ r(
  c,
  {
    classes: {
      colorPrimary: "bar-background-color",
      barColorPrimary: "bar-color"
    }
  }
) });
function g({
  size: e = 20,
  margin: a = "auto"
}) {
  return /* @__PURE__ */ r(
    "div",
    {
      role: "progressbar",
      className: "spinner",
      style: {
        height: `${e}px`,
        width: `${e}px`,
        backgroundSize: `${e}px`,
        margin: `${a}`
      }
    }
  );
}
function B({
  show: e,
  currentProgress: a,
  onCancel: i,
  totalProgress: t,
  headlineText: s,
  hintText: l
}) {
  b(() => (document.body.style.cursor = e ? "wait" : "default", () => {
    document.body.style.cursor = "default";
  }), [e]);
  const m = /* @__PURE__ */ n(d, { children: [
    /* @__PURE__ */ r("div", { className: "bar-loader", children: /* @__PURE__ */ r(
      c,
      {
        "data-testid": "progress-bar",
        variant: "determinate",
        classes: {
          colorPrimary: "bar-background-color",
          barColorPrimary: "bar-color"
        },
        value: a / t * 100
      }
    ) }),
    /* @__PURE__ */ r(
      o,
      {
        variant: "headline3",
        sx: {
          mb: 2
        },
        children: s
      }
    ),
    /* @__PURE__ */ r(
      o,
      {
        variant: "hintText",
        sx: {
          mb: 2
        },
        children: l
      }
    )
  ] });
  return /* @__PURE__ */ r(
    p,
    {
      open: e,
      onClick: () => {
      },
      "aria-hidden": !1,
      sx: {
        backgroundColor: "rgba(255, 255, 255, 0.9)",
        zIndex: (u) => u.zIndex.modal + 1
      },
      children: /* @__PURE__ */ n(
        x,
        {
          sx: {
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexDirection: "column"
          },
          children: [
            t ? m : /* @__PURE__ */ n(d, { children: [
              /* @__PURE__ */ r(g, { size: 40, margin: "16px" }),
              /* @__PURE__ */ r(
                o,
                {
                  variant: "headline3",
                  "data-testid": "spinner-hint-text",
                  sx: {
                    mb: 2
                  },
                  children: l
                }
              )
            ] }),
            i && /* @__PURE__ */ r(h, { variant: "outlined", color: "primary", onClick: i, children: "Cancel" })
          ]
        }
      )
    }
  );
}
export {
  B as BlockingLoader,
  g as SynapseSpinner,
  C as default
};
//# sourceMappingURL=LoadingScreen.js.map