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

Reusable react components for payment kit v2

import { jsx, jsxs } from "react/jsx-runtime";
import { Box, Divider, Fade, Skeleton, Stack } from "@mui/material";
export default function DonationSkeleton() {
  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: 40 }),
    /* @__PURE__ */ jsx(
      Divider,
      {
        sx: {
          mt: {
            xs: "16px",
            md: "16px"
          },
          mb: {
            xs: "16px",
            md: "16px"
          }
        }
      }
    ),
    /* @__PURE__ */ jsxs(
      Stack,
      {
        direction: "row",
        spacing: 2,
        sx: {
          justifyContent: "space-between"
        },
        children: [
          /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1.5rem", width: "40%" } }),
          /* @__PURE__ */ jsxs(
            Box,
            {
              sx: {
                display: "flex",
                alignItems: "center",
                gap: 2
              },
              children: [
                /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Skeleton, { height: 60, width: 80 }) }),
                /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Skeleton, { height: 60, width: 120 }) })
              ]
            }
          )
        ]
      }
    )
  ] }) });
}