@blocklet/payment-react/es/checkout-v2/views/loading-view.js

Reusable react components for payment kit v2

import { jsx, jsxs } from "react/jsx-runtime";
import { Box } from "@mui/material";
import { alpha, useTheme } from "@mui/material/styles";
import Header from "@blocklet/ui-react/lib/Header";
function PulsingDots() {
  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 2, mt: 4 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
    Box,
    {
      sx: {
        width: 12,
        height: 12,
        borderRadius: "50%",
        bgcolor: "primary.main",
        opacity: 0.4,
        animation: `pulse 1.4s ease-in-out ${i * 0.2}s infinite`,
        "@keyframes pulse": {
          "0%, 80%, 100%": { transform: "scale(0.6)", opacity: 0.3 },
          "40%": { transform: "scale(1)", opacity: 0.7 }
        }
      }
    },
    i
  )) });
}
function LoadingDecoration() {
  return /* @__PURE__ */ jsxs(
    Box,
    {
      sx: {
        position: "relative",
        width: { xs: 160, md: 200 },
        height: { xs: 160, md: 200 }
      },
      children: [
        /* @__PURE__ */ jsx(
          Box,
          {
            sx: {
              position: "absolute",
              inset: 0,
              borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
              background: (t) => `linear-gradient(45deg, ${alpha(t.palette.primary.main, 0.1)}, ${alpha(t.palette.primary.main, 0.03)})`,
              filter: "blur(1px)",
              animation: "spin 20s linear infinite",
              "@keyframes spin": { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } }
            }
          }
        ),
        /* @__PURE__ */ jsx(
          Box,
          {
            sx: {
              position: "absolute",
              inset: 0,
              borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
              background: (t) => `linear-gradient(135deg, ${alpha(t.palette.primary.main, 0.07)}, ${alpha(t.palette.primary.main, 0.01)})`,
              filter: "blur(1px)",
              transform: "scale(0.88)",
              opacity: 0.6,
              animation: "spinReverse 15s linear infinite",
              "@keyframes spinReverse": {
                from: { transform: "scale(0.88) rotate(0deg)" },
                to: { transform: "scale(0.88) rotate(-360deg)" }
              }
            }
          }
        )
      ]
    }
  );
}
export default function LoadingView({ mode = "inline" }) {
  const isFullScreen = mode === "standalone";
  const theme = useTheme();
  const primaryColor = theme.palette.primary.main;
  const bgSx = {
    background: {
      xs: "none",
      md: `linear-gradient(160deg, ${alpha(primaryColor, 0.03)} 0%, ${alpha(primaryColor, 0.07)} 50%, ${alpha(primaryColor, 0.04)} 100%)`
    },
    bgcolor: (t) => t.palette.mode === "dark" ? "background.default" : "#f8faff"
  };
  const centerContent = /* @__PURE__ */ jsxs(
    Box,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        flex: 1
      },
      children: [
        /* @__PURE__ */ jsx(LoadingDecoration, {}),
        /* @__PURE__ */ jsx(PulsingDots, {})
      ]
    }
  );
  if (!isFullScreen) {
    return /* @__PURE__ */ jsx(
      Box,
      {
        sx: {
          display: "flex",
          width: "100%",
          minHeight: { xs: 400, md: 640 },
          maxWidth: 1120,
          mx: "auto",
          borderRadius: "16px",
          overflow: "hidden",
          boxShadow: 1,
          border: 1,
          borderColor: "divider",
          borderLeft: "4px solid",
          borderLeftColor: "primary.main",
          ...bgSx
        },
        children: centerContent
      }
    );
  }
  return /* @__PURE__ */ jsxs(
    Box,
    {
      sx: {
        width: "100%",
        height: "100vh",
        minHeight: "100vh",
        display: "flex",
        flexDirection: "column",
        position: "relative",
        overflow: "hidden",
        ...bgSx
      },
      children: [
        /* @__PURE__ */ jsx(
          Header,
          {
            sx: {
              position: "absolute",
              top: 20,
              left: 0,
              right: 0,
              zIndex: 10,
              background: "transparent",
              "& .header-container": { height: "auto" }
            },
            hideNavMenu: true,
            brand: null,
            description: null,
            addons: (buildIns) => buildIns.filter((addon) => ["locale-selector", "theme-mode-toggle", "session-user"].includes(addon.key))
          }
        ),
        centerContent
      ]
    }
  );
}