@coder/backstage-plugin-coder/dist/components/CoderAuthForm/CoderAuthLoadingState.esm.js

Create and manage Coder workspaces from Backstage

import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { CoderLogo } from '../CoderLogo/CoderLogo.esm.js';
import { makeStyles } from '@material-ui/core';
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.esm.js';

const MAX_DOTS = 3;
const dotRange = new Array(MAX_DOTS).fill(null).map((_, i) => i + 1);
const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    flexFlow: "column nowrap",
    alignItems: "center"
  },
  text: {
    lineHeight: theme.typography.body1.lineHeight,
    paddingLeft: theme.spacing(1)
  },
  coderLogo: {
    display: "block",
    width: "fit-content",
    marginLeft: "auto",
    marginRight: "auto"
  }
}));
const CoderAuthLoadingState = () => {
  const [visibleDots, setVisibleDots] = useState(0);
  const styles = useStyles();
  useEffect(() => {
    const intervalId = window.setInterval(() => {
      setVisibleDots((current) => (current + 1) % (MAX_DOTS + 1));
    }, 1e3);
    return () => window.clearInterval(intervalId);
  }, []);
  return /* @__PURE__ */ jsxs("div", { className: styles.root, children: [
    /* @__PURE__ */ jsx(CoderLogo, { className: styles.coderLogo }),
    /* @__PURE__ */ jsxs("p", { className: styles.text, children: [
      "Loading",
      /* @__PURE__ */ jsx(VisuallyHidden, { children: "\u2026" }),
      dotRange.map((dotPosition) => /* @__PURE__ */ jsx(
        "span",
        {
          style: { opacity: visibleDots >= dotPosition ? 1 : 0 },
          "aria-hidden": true,
          children: "."
        },
        dotPosition
      ))
    ] })
  ] });
};

export { CoderAuthLoadingState };
//# sourceMappingURL=CoderAuthLoadingState.esm.js.map