payment-kit 1.13.165 → 1.13.166

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.165
+version: 1.13.166
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.165",
+  "version": "1.13.166",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -50,7 +50,7 @@
     "@arcblock/jwt": "^1.18.110",
     "@arcblock/ux": "^2.9.39",
     "@blocklet/logger": "1.16.23",
-    "@blocklet/payment-react": "1.13.165",
+    "@blocklet/payment-react": "1.13.166",
     "@blocklet/sdk": "1.16.23",
     "@blocklet/ui-react": "^2.9.39",
     "@blocklet/uploader": "^0.0.74",
@@ -110,7 +110,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.23",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@blocklet/payment-types": "1.13.165",
+    "@blocklet/payment-types": "1.13.166",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "24fadab6620ca13856393399efd6a1dffc431d66"
+  "gitHead": "70ee269e307cbab0ecb58fb4f287b749df0f2277"
 }

package/src/app.tsx

@@ -13,6 +13,7 @@ import { joinURL } from 'ufo';
 
 import ErrorFallback from './components/error-fallback';
 import Layout from './components/layout/admin';
+import { TransitionProvider } from './components/progress-bar';
 import { SessionProvider } from './contexts/session';
 import { translations } from './locales';
 
@@ -38,82 +39,84 @@ const theme = createTheme({
 function App() {
   return (
     <ThemeProvider theme={theme}>
-      <LocaleProvider translations={translations} fallbackLocale="en">
-        <ErrorBoundary FallbackComponent={ErrorFallback} onReset={window.location.reload}>
-          <Suspense
-            fallback={
-              <Center>
-                <CircularProgress />
-              </Center>
-            }>
-            <Routes>
-              <Route path="/" element={<HomePage />} />
-              <Route path="/checkout/:action/:id" element={<CheckoutPage />} />
-              <Route key="admin-index" path="/admin" element={<AdminPage />} />,
-              <Route key="admin-tabs" path="/admin/:group" element={<AdminPage />} />,
-              <Route key="admin-sub" path="/admin/:group/:page" element={<AdminPage />} />,
-              <Route key="admin-fallback" path="/admin/*" element={<AdminPage />} />,
-              <Route
-                key="customer-home"
-                path="/customer"
-                element={
-                  <Layout>
-                    <CustomerHome />
-                  </Layout>
-                }
-              />
-              <Route
-                key="customer-subscription"
-                path="/customer/subscription/:id"
-                element={
-                  <Layout>
-                    <CustomerSubscriptionDetail />
-                  </Layout>
-                }
-              />
-              <Route
-                key="customer-subscription-change-plan"
-                path="/customer/subscription/:id/change-plan"
-                element={
-                  <Layout>
-                    <CustomerSubscriptionChangePlan />
-                  </Layout>
-                }
-              />
-              <Route
-                key="customer-subscription-change-payment"
-                path="/customer/subscription/:id/change-payment"
-                element={
-                  <Layout>
-                    <CustomerSubscriptionChangePayment />
-                  </Layout>
-                }
-              />
-              <Route key="subscription-embed" path="/customer/embed/subscription" element={<MiniInvoiceList />} />,
-              <Route
-                key="customer-due"
-                path="/customer/invoice/past-due"
-                element={
-                  <Layout>
-                    <CustomerInvoicePastDue />
-                  </Layout>
-                }
-              />
-              <Route
-                key="customer-invoice"
-                path="/customer/invoice/:id"
-                element={
-                  <Layout>
-                    <CustomerInvoiceDetail />
-                  </Layout>
-                }
-              />
-              <Route key="customer-fallback" path="/customer/*" element={<Navigate to="/customer" />} />,
-              <Route path="*" element={<Navigate to="/" />} />
-            </Routes>
-          </Suspense>
-        </ErrorBoundary>
-      </LocaleProvider>
+      <TransitionProvider>
+        <LocaleProvider translations={translations} fallbackLocale="en">
+          <ErrorBoundary FallbackComponent={ErrorFallback} onReset={window.location.reload}>
+            <Suspense
+              fallback={
+                <Center>
+                  <CircularProgress />
+                </Center>
+              }>
+              <Routes>
+                <Route path="/" element={<HomePage />} />
+                <Route path="/checkout/:action/:id" element={<CheckoutPage />} />
+                <Route key="admin-index" path="/admin" element={<AdminPage />} />,
+                <Route key="admin-tabs" path="/admin/:group" element={<AdminPage />} />,
+                <Route key="admin-sub" path="/admin/:group/:page" element={<AdminPage />} />,
+                <Route key="admin-fallback" path="/admin/*" element={<AdminPage />} />,
+                <Route
+                  key="customer-home"
+                  path="/customer"
+                  element={
+                    <Layout>
+                      <CustomerHome />
+                    </Layout>
+                  }
+                />
+                <Route
+                  key="customer-subscription"
+                  path="/customer/subscription/:id"
+                  element={
+                    <Layout>
+                      <CustomerSubscriptionDetail />
+                    </Layout>
+                  }
+                />
+                <Route
+                  key="customer-subscription-change-plan"
+                  path="/customer/subscription/:id/change-plan"
+                  element={
+                    <Layout>
+                      <CustomerSubscriptionChangePlan />
+                    </Layout>
+                  }
+                />
+                <Route
+                  key="customer-subscription-change-payment"
+                  path="/customer/subscription/:id/change-payment"
+                  element={
+                    <Layout>
+                      <CustomerSubscriptionChangePayment />
+                    </Layout>
+                  }
+                />
+                <Route key="subscription-embed" path="/customer/embed/subscription" element={<MiniInvoiceList />} />,
+                <Route
+                  key="customer-due"
+                  path="/customer/invoice/past-due"
+                  element={
+                    <Layout>
+                      <CustomerInvoicePastDue />
+                    </Layout>
+                  }
+                />
+                <Route
+                  key="customer-invoice"
+                  path="/customer/invoice/:id"
+                  element={
+                    <Layout>
+                      <CustomerInvoiceDetail />
+                    </Layout>
+                  }
+                />
+                <Route key="customer-fallback" path="/customer/*" element={<Navigate to="/customer" />} />,
+                <Route path="*" element={<Navigate to="/" />} />
+              </Routes>
+            </Suspense>
+          </ErrorBoundary>
+        </LocaleProvider>
+      </TransitionProvider>
     </ThemeProvider>
   );
 }

package/src/components/event/list.tsx

@@ -8,6 +8,7 @@ import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { useTransitionContext } from '../progress-bar';
 import Table from '../table';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TEventExpanded[]; count: number }> => {
@@ -141,6 +142,7 @@ export default function EventList({ type, object_id, features }: ListProps) {
     pageSize: persisted.rowsPerPage || 50,
     page: persisted.page ? persisted.page + 1 : 1,
   });
+  const { startTransition } = useTransitionContext();
 
   const { loading, error, data, refresh } = useRequest(() => fetchData(search));
   useEffect(() => {
@@ -207,7 +209,9 @@ export default function EventList({ type, object_id, features }: ListProps) {
         rowsPerPage: search.pageSize,
         onRowClick: (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TEventExpanded;
-          navigate(`/admin/developers/${item.id}`);
+          startTransition(() => {
+            navigate(`/admin/developers/${item.id}`);
+          });
         },
       }}
       toolbar={features?.toolbar}

package/src/components/filter-toolbar.tsx

@@ -2,7 +2,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, usePaymentContext } from '@blocklet/payment-react';
 import type { TCustomer } from '@blocklet/payment-types';
 import { Add, Close } from '@mui/icons-material';
-import { ClickAwayListener, Menu, MenuItem } from '@mui/material';
+import { Button, ClickAwayListener, Menu, MenuItem } from '@mui/material';
 import { Box, styled } from '@mui/system';
 import { useEffect, useState } from 'react';
 
@@ -86,7 +86,7 @@ function SearchStatus({ status = [], setSearch }: Pick<Props, 'status' | 'setSea
       onClick={(e) => {
         setShow(e.currentTarget as any);
       }}>
-      <div className="option-btn">
+      <Button className="option-btn" variant="text">
         {display ? (
           <Close
             sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
@@ -104,7 +104,7 @@ function SearchStatus({ status = [], setSearch }: Pick<Props, 'status' | 'setSea
         )}
         {t('common.status')}
         <span>{display}</span>
-      </div>
+      </Button>
       <Menu
         anchorEl={show}
         open={Boolean(show)}
@@ -155,7 +155,7 @@ function SearchCurrency({ setSearch }: Pick<Props, 'setSearch'>) {
       onClick={(e) => {
         setShow(e.currentTarget as any);
       }}>
-      <div className="option-btn">
+      <Button className="option-btn" variant="text">
         {display ? (
           <Close
             sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
@@ -173,7 +173,7 @@ function SearchCurrency({ setSearch }: Pick<Props, 'setSearch'>) {
         )}
         {t('common.currency')}
         <span>{display}</span>
-      </div>
+      </Button>
       <Menu
         anchorEl={show}
         open={Boolean(show)}
@@ -226,7 +226,7 @@ function SearchCustomers({ setSearch }: Pick<Props, 'setSearch'>) {
 
   return (
     <section onClick={(e: any) => setShow(e.currentTarget)}>
-      <div className="option-btn">
+      <Button className="option-btn" variant="text">
         {display ? (
           <Close
             sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
@@ -244,7 +244,7 @@ function SearchCustomers({ setSearch }: Pick<Props, 'setSearch'>) {
         )}
         {t('common.customer')}
         <span>{display}</span>
-      </div>
+      </Button>
 
       <Menu
         anchorEl={show}
@@ -327,7 +327,7 @@ function SearchProducts({ setSearch }: Pick<Props, 'setSearch'>) {
         setShow(false);
       }}>
       <section onClick={() => setShow(!show)}>
-        <div className="option-btn">
+        <Button className="option-btn" variant="text">
           {display ? (
             <Close
               sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
@@ -345,7 +345,7 @@ function SearchProducts({ setSearch }: Pick<Props, 'setSearch'>) {
           )}
           {t('admin.subscription.product')}
           <span>{display}</span>
-        </div>
+        </Button>
 
         <ul
           className="status-options"
@@ -388,7 +388,11 @@ const Root = styled(Box)`
     align-items: center;
     border-radius: 25px;
     background: #f6f6f6;
-    padding: 0 10px;
+    padding: 5px 10px;
+    color: #555;
+    font-size: 14px;
+    line-height: 14px;
+    overflow: hidden;
   }
 
   .option-btn span {

package/src/components/invoice/list.tsx

@@ -10,6 +10,7 @@ import { useNavigate } from 'react-router-dom';
 
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
+import { useTransitionContext } from '../progress-bar';
 import Table from '../table';
 import InvoiceActions from './action';
 
@@ -93,6 +94,7 @@ export default function InvoiceList({ customer_id, subscription_id, features, st
     pageSize: persisted.rowsPerPage || 20,
     page: persisted.page ? persisted.page + 1 : 1,
   });
+  const { startTransition } = useTransitionContext();
 
   const [data, setData] = useState({}) as any;
 
@@ -228,7 +230,7 @@ export default function InvoiceList({ customer_id, subscription_id, features, st
           if (invoiceProps?.onClick) {
             await invoiceProps.onClick(item);
           } else {
-            navigate(`/admin/billing/${item.id}`);
+            startTransition(() => navigate(`/admin/billing/${item.id}`));
           }
         },
         onColumnSortChange(_: any, order: any) {

package/src/components/payment-intent/list.tsx

@@ -11,6 +11,7 @@ import { useNavigate } from 'react-router-dom';
 import { debounce } from '../../libs/util';
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
+import { useTransitionContext } from '../progress-bar';
 import Table from '../table';
 import PaymentIntentActions from './actions';
 
@@ -84,6 +85,7 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
     page: persisted.page ? persisted.page + 1 : 1,
   });
 
+  const { startTransition } = useTransitionContext();
   const [data, setData] = useState({}) as any;
 
   useEffect(() => {
@@ -239,7 +241,9 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
         },
         onRowClick: (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TPaymentIntentExpanded;
-          navigate(`/admin/payments/${item.id}`);
+          startTransition(() => {
+            navigate(`/admin/payments/${item.id}`);
+          });
         },
       }}
       toolbar={features?.toolbar}

package/src/components/progress-bar.tsx

@@ -0,0 +1,56 @@
+import Box from '@mui/material/Box';
+import LinearProgress from '@mui/material/LinearProgress';
+import * as React from 'react';
+
+type Props = {
+  pending: boolean;
+};
+
+export default function ProgressBar({ pending = true }: Props) {
+  const [progress, setProgress] = React.useState(0);
+  React.useEffect(() => {
+    const timer = setInterval(
+      () => {
+        setProgress((oldProgress) => {
+          if (oldProgress === 100) {
+            if (timer) {
+              clearInterval(timer);
+            }
+            return -1;
+          }
+          const diff = Math.random() * 10;
+          return Math.min(oldProgress + diff, 100);
+        });
+      },
+      pending ? 500 : 30
+    ); // 如果已完成，就加速
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [pending]);
+  return (
+    <Box sx={{ width: '100%', height: '4px', position: 'fixed', top: 0, left: 0, zIndex: '999999' }}>
+      <LinearProgress
+        variant="determinate"
+        value={progress}
+        sx={{ opacity: progress === -1 ? 0 : 1, transition: '0.3s' }}
+      />
+    </Box>
+  );
+}
+
+const Transition = React.createContext({
+  startTransition: null,
+} as any);
+
+export function TransitionProvider({ children }: { children: React.ReactNode }) {
+  const [isPending, startTransition] = React.useTransition();
+
+  const memoObj = React.useMemo(() => ({ isPending, startTransition }), [isPending]);
+  return <Transition.Provider value={memoObj}>{children}</Transition.Provider>;
+}
+
+export function useTransitionContext() {
+  return React.useContext(Transition);
+}

package/src/components/refund/list.tsx

@@ -10,6 +10,7 @@ import { useNavigate } from 'react-router-dom';
 
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
+import { useTransitionContext } from '../progress-bar';
 import Table from '../table';
 import RefundActions from './actions';
 
@@ -74,7 +75,7 @@ RefundList.defaultProps = {
 export default function RefundList({ customer_id, invoice_id, subscription_id, features }: ListProps) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
-
+  const { startTransition } = useTransitionContext();
   const listKey = getListKey({ customer_id, invoice_id });
 
   const persisted = getDurableData(listKey);
@@ -199,7 +200,9 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, f
         rowsPerPage: search.pageSize,
         onRowClick: (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TRefundExpanded;
-          navigate(`/admin/payments/${item.id}`);
+          startTransition(() => {
+            navigate(`/admin/payments/${item.id}`);
+          });
         },
         onColumnSortChange(_: any, order: any) {
           setSearch({

package/src/components/subscription/list.tsx

@@ -9,6 +9,7 @@ import { useNavigate } from 'react-router-dom';
 
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
+import { useTransitionContext } from '../progress-bar';
 import Table from '../table';
 import SubscriptionActions from './actions';
 import SubscriptionDescription from './description';
@@ -71,6 +72,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
 
   const { t } = useLocaleContext();
   const navigate = useNavigate();
+  const { startTransition } = useTransitionContext();
   const [search, setSearch] = useState<SearchProps>({
     status: status as string,
     customer_id,
@@ -192,7 +194,9 @@ export default function SubscriptionList({ customer_id, features, status }: List
         rowsPerPage: search.pageSize,
         onRowClick: (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TSubscriptionExpanded;
-          navigate(`/admin/billing/${item.id}`);
+          startTransition(() => {
+            navigate(`/admin/billing/${item.id}`);
+          });
         },
         onColumnSortChange(_: any, order: any) {
           setSearch({

package/src/pages/admin/billing/index.tsx

@@ -1,9 +1,11 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
 import { Typography } from '@mui/material';
-import React, { isValidElement, startTransition } from 'react';
+import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import { useTransitionContext } from '../../../components/progress-bar';
+
 const SubscriptionDetail = React.lazy(() => import('./subscriptions/detail'));
 const InvoiceDetail = React.lazy(() => import('./invoices/detail'));
 
@@ -16,6 +18,7 @@ export default function BillingIndex() {
   const navigate = useNavigate();
   const { t } = useLocaleContext();
   const { page = 'invoices' } = useParams();
+  const { startTransition } = useTransitionContext();
 
   if (page.startsWith('sub_')) {
     return <SubscriptionDetail id={page} />;

package/src/pages/admin/customers/customers/index.tsx

@@ -8,6 +8,7 @@ import { Avatar, CircularProgress, Stack, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { useTransitionContext } from '../../../../components/progress-bar';
 import Table from '../../../../components/table';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TCustomer[]; count: number }> => {
@@ -30,6 +31,7 @@ export default function CustomersList() {
 
   const { t } = useLocaleContext();
   const navigate = useNavigate();
+  const { startTransition } = useTransitionContext();
   const [search, setSearch] = useState<{ active?: string; pageSize: number; page: number; q?: any; o?: string }>({
     active: '',
     o: 'desc',
@@ -118,7 +120,9 @@ export default function CustomersList() {
         rowsPerPage: search.pageSize,
         onRowClick: (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TCustomer;
-          navigate(`/admin/customers/${item.id}`);
+          startTransition(() => {
+            navigate(`/admin/customers/${item.id}`);
+          });
         },
         onColumnSortChange(_: any, order: any) {
           setSearch({

package/src/pages/admin/customers/index.tsx

@@ -1,9 +1,11 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
 import { Typography } from '@mui/material';
-import React, { isValidElement, startTransition } from 'react';
+import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import { useTransitionContext } from '../../../components/progress-bar';
+
 const CustomerDetail = React.lazy(() => import('./customers/detail'));
 
 const pages = {
@@ -14,6 +16,7 @@ export default function CustomerIndex() {
   const navigate = useNavigate();
   const { t } = useLocaleContext();
   const { page = 'overview' } = useParams();
+  const { startTransition } = useTransitionContext();
 
   if (page.startsWith('cus_')) {
     return <CustomerDetail id={page} />;

package/src/pages/admin/developers/index.tsx

@@ -1,9 +1,11 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
 import { Typography } from '@mui/material';
-import React, { isValidElement, startTransition } from 'react';
+import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import { useTransitionContext } from '../../../components/progress-bar';
+
 const EventDetail = React.lazy(() => import('./events/detail'));
 const WebhookDetail = React.lazy(() => import('./webhooks/detail'));
 
@@ -18,6 +20,7 @@ export default function DevelopersIndex() {
   const navigate = useNavigate();
   const { t } = useLocaleContext();
   const { page = 'overview' } = useParams();
+  const { startTransition } = useTransitionContext();
 
   if (page.startsWith('evt_')) {
     return <EventDetail id={page} />;

package/src/pages/admin/developers/webhooks/index.tsx

@@ -8,6 +8,7 @@ import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { useTransitionContext } from '../../../../components/progress-bar';
 import Table from '../../../../components/table';
 import { getWebhookStatusColor } from '../../../../libs/util';
 
@@ -25,6 +26,7 @@ export default function WebhooksList() {
 
   const { t } = useLocaleContext();
   const navigate = useNavigate();
+  const { startTransition } = useTransitionContext();
   const [search, setSearch] = useState<{ active: string; pageSize: number; page: number }>({
     active: '',
     pageSize: persisted.rowsPerPage || 20,
@@ -90,7 +92,9 @@ export default function WebhooksList() {
         rowsPerPage: search.pageSize,
         onRowClick: (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TWebhookEndpoint;
-          navigate(`/admin/developers/${item.id}`);
+          startTransition(() => {
+            navigate(`/admin/developers/${item.id}`);
+          });
         },
       }}
       loading={loading}

package/src/pages/admin/index.tsx

@@ -1,10 +1,11 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { PaymentProvider, Switch, usePaymentContext } from '@blocklet/payment-react';
 import { Box, Chip, Stack } from '@mui/material';
-import React, { Suspense, isValidElement, startTransition, useEffect } from 'react';
+import React, { isValidElement, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import Layout from '../../components/layout/admin';
+import ProgressBar, { useTransitionContext } from '../../components/progress-bar';
 import { useSessionContext } from '../../contexts/session';
 
 const groups = {
@@ -43,6 +44,7 @@ function Admin() {
   const { t } = useLocaleContext();
   const settings = usePaymentContext();
   const { group = 'overview' } = useParams();
+  const { isPending, startTransition } = useTransitionContext();
 
   const onLivemodeChange = (e: any) => {
     settings.setLivemode(!e.target.checked);
@@ -71,6 +73,7 @@ function Admin() {
 
   return (
     <Layout>
+      <ProgressBar pending={isPending} />
       <Stack
         direction="row"
         alignItems="center"
@@ -99,9 +102,7 @@ function Admin() {
           </label>
         </Stack>
       </Stack>
-      <Suspense fallback={<div />}>
-        <div className="page-content">{isValidElement(TabComponent) ? TabComponent : <TabComponent />}</div>
-      </Suspense>
+      <div className="page-content">{isValidElement(TabComponent) ? TabComponent : <TabComponent />}</div>
     </Layout>
   );
 }

package/src/pages/admin/payments/index.tsx

@@ -1,9 +1,11 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
 import { Stack, Typography } from '@mui/material';
-import React, { isValidElement, startTransition } from 'react';
+import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import { useTransitionContext } from '../../../components/progress-bar';
+
 const PaymentLinkCreate = React.lazy(() => import('./links/create'));
 const PaymentLinkDetail = React.lazy(() => import('./links/detail'));
 const PaymentIntentDetail = React.lazy(() => import('./intents/detail'));
@@ -19,6 +21,7 @@ export default function PaymentIndex() {
   const navigate = useNavigate();
   const { t } = useLocaleContext();
   const { page = 'intents' } = useParams();
+  const { startTransition } = useTransitionContext();
 
   if (page.startsWith('pi_')) {
     return <PaymentIntentDetail id={page} />;

package/src/pages/admin/payments/links/index.tsx

@@ -12,6 +12,7 @@ import useBus from 'use-bus';
 
 import Copyable from '../../../../components/copyable';
 import PaymentLinkActions from '../../../../components/payment-link/actions';
+import { useTransitionContext } from '../../../../components/progress-bar';
 import Table from '../../../../components/table';
 import { ProductsProvider } from '../../../../contexts/products';
 import { formatPaymentLinkPricing } from '../../../../libs/util';
@@ -29,6 +30,7 @@ function PaymentLinks() {
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
   const navigate = useNavigate();
+  const { startTransition } = useTransitionContext();
 
   const persisted = getDurableData(listKey);
   const [search, setSearch] = useState<{ active: string; pageSize: number; page: number }>({
@@ -148,7 +150,9 @@ function PaymentLinks() {
         rowsPerPage: search.pageSize,
         onRowClick: (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TPaymentLinkExpanded;
-          navigate(`/admin/payments/${item.id}`);
+          startTransition(() => {
+            navigate(`/admin/payments/${item.id}`);
+          });
         },
       }}
       loading={loading}

package/src/pages/admin/products/index.tsx

@@ -4,6 +4,8 @@ import { Stack, Typography } from '@mui/material';
 import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import { useTransitionContext } from '../../../components/progress-bar';
+
 const ProductCreate = React.lazy(() => import('./products/create'));
 const ProductDetail = React.lazy(() => import('./products/detail'));
 const PriceDetail = React.lazy(() => import('./prices/detail'));
@@ -21,6 +23,7 @@ export default function Products() {
   const navigate = useNavigate();
   const { t } = useLocaleContext();
   const { page = 'products' } = useParams();
+  const { startTransition } = useTransitionContext();
 
   if (page.startsWith('prod_')) {
     return <ProductDetail id={page} />;
@@ -61,7 +64,7 @@ export default function Products() {
       <Tabs
         tabs={tabs}
         current={page}
-        onChange={(newTab: string) => navigate(`/admin/products/${newTab}`)}
+        onChange={(newTab: string) => startTransition(() => navigate(`/admin/products/${newTab}`))}
         scrollButtons="auto"
       />
       {isValidElement(TabComponent) ? TabComponent : <TabComponent />}

package/src/pages/admin/products/pricing-tables/index.tsx

@@ -12,6 +12,7 @@ import useBus from 'use-bus';
 
 import Copyable from '../../../../components/copyable';
 import PricingTableActions from '../../../../components/pricing-table/actions';
+import { useTransitionContext } from '../../../../components/progress-bar';
 import Table from '../../../../components/table';
 import { ProductsProvider } from '../../../../contexts/products';
 
@@ -27,6 +28,7 @@ function PricingTables() {
   const listKey = 'pricing-tables';
   const { t } = useLocaleContext();
   const navigate = useNavigate();
+  const { startTransition } = useTransitionContext();
 
   const persisted = getDurableData(listKey);
   const [search, setSearch] = useState<{ active: string; pageSize: number; page: number }>({
@@ -135,7 +137,9 @@ function PricingTables() {
         rowsPerPage: search.pageSize,
         onRowClick: (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TPricingTableExpanded;
-          navigate(`/admin/products/${item.id}`);
+          startTransition(() => {
+            navigate(`/admin/products/${item.id}`);
+          });
         },
       }}
       loading={loading}

package/src/pages/admin/products/products/index.tsx

@@ -7,9 +7,10 @@ import { CircularProgress } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import FilterTooolbar from '../../../../components/filter-toolbar';
+import FilterToolbar from '../../../../components/filter-toolbar';
 import InfoCard from '../../../../components/info-card';
 import ProductActions from '../../../../components/product/actions';
+import { useTransitionContext } from '../../../../components/progress-bar';
 import Table from '../../../../components/table';
 import { formatProductPrice } from '../../../../libs/util';
 
@@ -33,6 +34,7 @@ export default function ProductsList() {
 
   const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
+  const { startTransition } = useTransitionContext();
   const { settings } = usePaymentContext();
   const [search, setSearch] = useState<{ active: string; pageSize: number; page: any; q?: any; o?: any }>({
     active: '',
@@ -130,7 +132,7 @@ export default function ProductsList() {
     <Table
       durable={listKey}
       durableKeys={['page', 'rowsPerPage']}
-      title={<FilterTooolbar setSearch={setSearch} search={search} status={['active', 'archived']} />}
+      title={<FilterToolbar setSearch={setSearch} search={search} status={['active', 'archived']} />}
       data={data.list}
       columns={columns}
       options={{
@@ -165,7 +167,9 @@ export default function ProductsList() {
         },
         onRowClick: (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TProductExpanded;
-          navigate(`/admin/products/${item.id}`);
+          startTransition(() => {
+            navigate(`/admin/products/${item.id}`);
+          });
         },
       }}
       loading={!data.list}

package/src/pages/admin/settings/index.tsx

@@ -1,9 +1,11 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
 import { Stack, Typography } from '@mui/material';
-import React, { isValidElement, startTransition } from 'react';
+import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import { useTransitionContext } from '../../../components/progress-bar';
+
 const PaymentMethodCreate = React.lazy(() => import('./payment-methods/create'));
 
 const pages = {
@@ -16,6 +18,7 @@ export default function SettingsIndex() {
   const navigate = useNavigate();
   const { t } = useLocaleContext();
   const { page = 'payment-methods' } = useParams();
+  const { startTransition } = useTransitionContext();
 
   const onTabChange = (newTab: string) => {
     startTransition(() => {

package/src/pages/customer/index.tsx

@@ -17,6 +17,7 @@ import BalanceList from '../../components/balance-list';
 import EditCustomer from '../../components/customer/edit';
 import InfoMetric from '../../components/info-metric';
 import InfoRow from '../../components/info-row';
+import ProgressBar, { useTransitionContext } from '../../components/progress-bar';
 import SectionHeader from '../../components/section/header';
 import CurrentSubscriptions from '../../components/subscription/portal/list';
 import { useSessionContext } from '../../contexts/session';
@@ -31,6 +32,7 @@ export default function CustomerHome() {
   const { events, session, connectApi } = useSessionContext();
   const [state, setState] = useSetState({ editing: false, loading: false });
   const navigate = useNavigate();
+  const { isPending, startTransition } = useTransitionContext();
 
   const { loading, error, data, runAsync } = useRequest(fetchData);
 
@@ -71,115 +73,120 @@ export default function CustomerHome() {
   };
 
   return (
-    <Grid container spacing={5}>
-      <Grid item xs={12} md={8}>
-        <Root direction="column" spacing={3} sx={{ my: 2 }}>
-          <Box className="section">
-            <SectionHeader title={t('payment.customer.subscriptions.current')} mb={0} />
-            <Box className="section-body">
-              <CurrentSubscriptions
-                id={data.id}
-                onChange={runAsync}
-                style={{
-                  cursor: 'pointer',
-                }}
-                onClickSubscription={(subscription) => {
-                  navigate(`/customer/subscription/${subscription.id}`);
-                }}
-              />
+    <>
+      <ProgressBar pending={isPending} />
+      <Grid container spacing={5}>
+        <Grid item xs={12} md={8}>
+          <Root direction="column" spacing={3} sx={{ my: 2 }}>
+            <Box className="section">
+              <SectionHeader title={t('payment.customer.subscriptions.current')} mb={0} />
+              <Box className="section-body">
+                <CurrentSubscriptions
+                  id={data.id}
+                  onChange={runAsync}
+                  style={{
+                    cursor: 'pointer',
+                  }}
+                  onClickSubscription={(subscription) => {
+                    startTransition(() => {
+                      navigate(`/customer/subscription/${subscription.id}`);
+                    });
+                  }}
+                />
+              </Box>
             </Box>
-          </Box>
-          <Box className="section">
-            <SectionHeader title={t('payment.customer.invoices')} mb={0}>
-              {isEmpty(data.summary.due) === false && (
-                <Tooltip title={t('payment.customer.pastDue.warning')}>
-                  <Button
-                    variant="contained"
-                    color="error"
-                    component="a"
-                    size="small"
-                    href={joinURL(window.location.origin, getPrefix(), '/customer/invoice/past-due')}
-                    target="_blank"
-                    rel="noreferrer"
-                    style={{ textDecoration: 'none' }}>
-                    {t('payment.customer.pastDue.invoices')}
-                  </Button>
-                </Tooltip>
-              )}
-            </SectionHeader>
-            <Box className="section-body">
-              <CustomerInvoiceList customer_id={data.id} />
+            <Box className="section">
+              <SectionHeader title={t('payment.customer.invoices')} mb={0}>
+                {isEmpty(data.summary.due) === false && (
+                  <Tooltip title={t('payment.customer.pastDue.warning')}>
+                    <Button
+                      variant="contained"
+                      color="error"
+                      component="a"
+                      size="small"
+                      href={joinURL(window.location.origin, getPrefix(), '/customer/invoice/past-due')}
+                      target="_blank"
+                      rel="noreferrer"
+                      style={{ textDecoration: 'none' }}>
+                      {t('payment.customer.pastDue.invoices')}
+                    </Button>
+                  </Tooltip>
+                )}
+              </SectionHeader>
+              <Box className="section-body">
+                <CustomerInvoiceList customer_id={data.id} />
+              </Box>
             </Box>
-          </Box>
-        </Root>
-      </Grid>
-      <Grid item xs={12} md={4}>
-        <Root direction="column" spacing={4} sx={{ my: 2 }}>
-          <Box className="section">
-            <SectionHeader title={t('payment.customer.details')}>
-              <Button
-                variant="outlined"
-                color="inherit"
-                size="small"
-                disabled={state.editing || state.loading}
-                onClick={() => setState({ editing: true })}>
-                <Edit fontSize="small" sx={{ mr: 0.5 }} />
-                {t('payment.customer.update')}
-              </Button>
-            </SectionHeader>
-            <Stack>
-              <InfoRow sizes={[1, 2]} label={t('common.did')} value={<DID copyable>{data.did}</DID>} />
-              <InfoRow sizes={[1, 2]} label={t('admin.customer.name')} value={data.name} />
-              <InfoRow sizes={[1, 2]} label={t('admin.customer.phone')} value={data.phone} />
-              <InfoRow sizes={[1, 2]} label={t('admin.customer.email')} value={data.email} />
-              <InfoRow
-                sizes={[1, 2]}
-                label={t('admin.customer.address.country')}
-                value={
-                  data.address?.country ? (
-                    <FlagEmoji iso2={data.address?.country} style={{ display: 'flex', width: 24 }} />
-                  ) : (
-                    ''
-                  )
-                }
-              />
-              <InfoRow sizes={[1, 2]} label={t('admin.customer.address.state')} value={data.address?.state} />
-              <InfoRow sizes={[1, 2]} label={t('admin.customer.address.city')} value={data.address?.city} />
-              <InfoRow sizes={[1, 2]} label={t('admin.customer.address.line1')} value={data.address?.line1} />
-              <InfoRow sizes={[1, 2]} label={t('admin.customer.address.line2')} value={data.address?.line2} />
-              <InfoRow
-                sizes={[1, 2]}
-                label={t('admin.customer.address.postal_code')}
-                value={data.address?.postal_code}
-              />
-            </Stack>
-            {state.editing && (
-              <EditCustomer
-                data={data}
-                loading={state.loading}
-                onSave={onUpdateInfo}
-                onCancel={() => setState({ editing: false })}
-              />
-            )}
-          </Box>
-          <Box className="section">
-            <SectionHeader title={t('payment.customer.summary')} />
-            <PaymentProvider session={session} connect={connectApi}>
-              <Stack
-                className="section-body"
-                direction="column"
-                spacing={2}
-                justifyContent="flex-start"
-                sx={{ width: '100%' }}>
-                <InfoMetric label={t('admin.customer.spent')} value={<BalanceList data={data.summary.paid} />} />
-                <InfoMetric label={t('admin.customer.due')} value={<BalanceList data={data.summary.due} />} />
-                <InfoMetric label={t('admin.customer.refund')} value={<BalanceList data={data.summary.refunded} />} />
+          </Root>
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <Root direction="column" spacing={4} sx={{ my: 2 }}>
+            <Box className="section">
+              <SectionHeader title={t('payment.customer.details')}>
+                <Button
+                  variant="outlined"
+                  color="inherit"
+                  size="small"
+                  disabled={state.editing || state.loading}
+                  onClick={() => setState({ editing: true })}>
+                  <Edit fontSize="small" sx={{ mr: 0.5 }} />
+                  {t('payment.customer.update')}
+                </Button>
+              </SectionHeader>
+              <Stack>
+                <InfoRow sizes={[1, 2]} label={t('common.did')} value={<DID copyable>{data.did}</DID>} />
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.name')} value={data.name} />
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.phone')} value={data.phone} />
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.email')} value={data.email} />
+                <InfoRow
+                  sizes={[1, 2]}
+                  label={t('admin.customer.address.country')}
+                  value={
+                    data.address?.country ? (
+                      <FlagEmoji iso2={data.address?.country} style={{ display: 'flex', width: 24 }} />
+                    ) : (
+                      ''
+                    )
+                  }
+                />
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.address.state')} value={data.address?.state} />
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.address.city')} value={data.address?.city} />
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.address.line1')} value={data.address?.line1} />
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.address.line2')} value={data.address?.line2} />
+                <InfoRow
+                  sizes={[1, 2]}
+                  label={t('admin.customer.address.postal_code')}
+                  value={data.address?.postal_code}
+                />
               </Stack>
-            </PaymentProvider>
-          </Box>
-        </Root>
+              {state.editing && (
+                <EditCustomer
+                  data={data}
+                  loading={state.loading}
+                  onSave={onUpdateInfo}
+                  onCancel={() => setState({ editing: false })}
+                />
+              )}
+            </Box>
+            <Box className="section">
+              <SectionHeader title={t('payment.customer.summary')} />
+              <PaymentProvider session={session} connect={connectApi}>
+                <Stack
+                  className="section-body"
+                  direction="column"
+                  spacing={2}
+                  justifyContent="flex-start"
+                  sx={{ width: '100%' }}>
+                  <InfoMetric label={t('admin.customer.spent')} value={<BalanceList data={data.summary.paid} />} />
+                  <InfoMetric label={t('admin.customer.due')} value={<BalanceList data={data.summary.due} />} />
+                  <InfoMetric label={t('admin.customer.refund')} value={<BalanceList data={data.summary.refunded} />} />
+                </Stack>
+              </PaymentProvider>
+            </Box>
+          </Root>
+        </Grid>
       </Grid>
-    </Grid>
+    </>
   );
 }