@blocklet/payment-react 1.13.143 → 1.13.145

package/es/checkout/table.js

@@ -1,14 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
-import { Alert, Stack, Typography } from "@mui/material";
+import { Alert, CircularProgress, Stack, Typography } from "@mui/material";
 import { Box } from "@mui/system";
 import { useRequest } from "ahooks";
 import { useState } from "react";
 import api from "../api.js";
 import Livemode from "../components/livemode.js";
 import PricingTable from "../components/pricing-table.js";
-import ProductSkeleton from "../payment/product-skeleton.js";
 import { mergeExtraParams } from "../util.js";
 import CheckoutForm from "./form.js";
 const fetchData = async (id) => {
@@ -27,20 +26,7 @@ export default function CheckoutTable({ id, onPaid, onError, mode, extraParams,
     return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
   }
   if (loading || !data) {
-    return /* @__PURE__ */ jsxs(
-      Stack,
-      {
-        flexWrap: "wrap",
-        direction: "row",
-        gap: { xs: 3, sm: 5, md: mode === "checkout" ? 10 : 5 },
-        justifyContent: "center",
-        children: [
-          /* @__PURE__ */ jsx(ProductSkeleton, { count: 2 }, 1),
-          /* @__PURE__ */ jsx(ProductSkeleton, { count: 3 }, 2),
-          /* @__PURE__ */ jsx(ProductSkeleton, { count: 4 }, 3)
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsx(CircularProgress, {});
   }
   if (data.items.length === 0) {
     return /* @__PURE__ */ jsx(Alert, { severity: "warning", children: t("payment.checkout.noPricing") });

package/lib/checkout/table.js

@@ -14,7 +14,6 @@ var _react = require("react");
 var _api = _interopRequireDefault(require("../api"));
 var _livemode = _interopRequireDefault(require("../components/livemode"));
 var _pricingTable = _interopRequireDefault(require("../components/pricing-table"));
-var _productSkeleton = _interopRequireDefault(require("../payment/product-skeleton"));
 var _util = require("../util");
 var _form = _interopRequireDefault(require("./form"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -52,23 +51,7 @@ function CheckoutTable({
     });
   }
   if (loading || !data) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-      flexWrap: "wrap",
-      direction: "row",
-      gap: {
-        xs: 3,
-        sm: 5,
-        md: mode === "checkout" ? 10 : 5
-      },
-      justifyContent: "center",
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_productSkeleton.default, {
-        count: 2
-      }, 1), /* @__PURE__ */(0, _jsxRuntime.jsx)(_productSkeleton.default, {
-        count: 3
-      }, 2), /* @__PURE__ */(0, _jsxRuntime.jsx)(_productSkeleton.default, {
-        count: 4
-      }, 3)]
-    });
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
   }
   if (data.items.length === 0) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.143",
+  "version": "1.13.145",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -89,7 +89,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.143",
+    "@blocklet/payment-types": "1.13.145",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -118,5 +118,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "7eca8fb8eda6bd07cddb0f916602a35d4f7b39a3"
+  "gitHead": "9ca5d8a2a30ae0da5630b25c409949f978a93190"
 }

package/src/checkout/table.tsx

@@ -1,7 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TPricingTableExpanded } from '@blocklet/payment-types';
-import { Alert, Stack, Typography } from '@mui/material';
+import { Alert, CircularProgress, Stack, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useRequest } from 'ahooks';
 import { useState } from 'react';
@@ -9,7 +9,6 @@ import { useState } from 'react';
 import api from '../api';
 import Livemode from '../components/livemode';
 import PricingTable from '../components/pricing-table';
-import ProductSkeleton from '../payment/product-skeleton';
 import { CheckoutProps } from '../types';
 import { mergeExtraParams } from '../util';
 import CheckoutForm from './form';
@@ -35,17 +34,7 @@ export default function CheckoutTable({ id, onPaid, onError, mode, extraParams,
   }
 
   if (loading || !data) {
-    return (
-      <Stack
-        flexWrap="wrap"
-        direction="row"
-        gap={{ xs: 3, sm: 5, md: mode === 'checkout' ? 10 : 5 }}
-        justifyContent="center">
-        <ProductSkeleton key={1} count={2} />
-        <ProductSkeleton key={2} count={3} />
-        <ProductSkeleton key={3} count={4} />
-      </Stack>
-    );
+    return <CircularProgress />;
   }
 
   if (data.items.length === 0) {