@blocklet/payment-react/es/payment/skeleton/payment.js

Reusable react components for payment kit v2

import { jsx, jsxs } from "react/jsx-runtime";
import { Box, Fade, Skeleton, Stack, Typography } from "@mui/material";
export default function PaymentSkeleton() {
  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
    /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1.75rem", width: "40%" } }),
    /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", height: 68 }),
    /* @__PURE__ */ jsxs(
      Box,
      {
        sx: {
          mt: 1
        },
        children: [
          /* @__PURE__ */ jsx(
            Typography,
            {
              component: "div",
              variant: "h4",
              sx: {
                mb: -1
              },
              children: /* @__PURE__ */ jsx(Skeleton, {})
            }
          ),
          /* @__PURE__ */ jsx(Typography, { component: "div", children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) })
        ]
      }
    ),
    /* @__PURE__ */ jsxs(Box, { children: [
      /* @__PURE__ */ jsx(
        Typography,
        {
          component: "div",
          variant: "h4",
          sx: {
            mb: -1
          },
          children: /* @__PURE__ */ jsx(Skeleton, {})
        }
      ),
      /* @__PURE__ */ jsx(Typography, { component: "div", children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) })
    ] }),
    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) })
  ] }) });
}