From 7d6c0964621a5989f9d83e04417576c80b897f59 Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Tue, 31 Oct 2023 17:00:19 +0800
Subject: [PATCH] feat(core): payment billing loading (#4763)

---
 .../general-setting/billing/index.tsx         | 33 ++++++++++++++++---
 .../general-setting/billing/style.css.ts      | 14 ++++++++
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx
index f206039628..a99e6f7098 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx
@@ -19,7 +19,9 @@ import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useMutation, useQuery } from '@affine/workspace/affine/gql';
 import { ArrowRightSmallIcon } from '@blocksuite/icons';
+import { Skeleton } from '@mui/material';
 import { Button, IconButton } from '@toeverything/components/button';
+import { Loading } from '@toeverything/components/loading';
 import { useSetAtom } from 'jotai';
 import { nanoid } from 'nanoid';
 import { Suspense, useCallback, useMemo, useState } from 'react';
@@ -63,16 +65,14 @@ export const BillingSettings = () => {
         title={t['com.affine.payment.billing-setting.title']()}
         subtitle={t['com.affine.payment.billing-setting.subtitle']()}
       />
-      {/* TODO: loading fallback */}
-      <Suspense>
+      <Suspense fallback={<SubscriptionSettingSkeleton />}>
         <SettingWrapper
           title={t['com.affine.payment.billing-setting.information']()}
         >
           <SubscriptionSettings />
         </SettingWrapper>
       </Suspense>
-      {/* TODO: loading fallback */}
-      <Suspense>
+      <Suspense fallback={<BillingHistorySkeleton />}>
         <SettingWrapper
           title={t['com.affine.payment.billing-setting.history']()}
         >
@@ -390,3 +390,28 @@ const InvoiceLine = ({
     </SettingRow>
   );
 };
+
+const SubscriptionSettingSkeleton = () => {
+  const t = useAFFiNEI18N();
+  return (
+    <SettingWrapper
+      title={t['com.affine.payment.billing-setting.information']()}
+    >
+      <div className={styles.subscriptionSettingSkeleton}>
+        <Skeleton variant="rounded" height="104px" />
+        <Skeleton variant="rounded" height="46px" />
+      </div>
+    </SettingWrapper>
+  );
+};
+
+const BillingHistorySkeleton = () => {
+  const t = useAFFiNEI18N();
+  return (
+    <SettingWrapper title={t['com.affine.payment.billing-setting.history']()}>
+      <div className={styles.billingHistorySkeleton}>
+        <Loading />
+      </div>
+    </SettingWrapper>
+  );
+};
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/style.css.ts
index 55243b36dd..f923725250 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/style.css.ts
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/style.css.ts
@@ -51,3 +51,17 @@ export const currentPlanName = style({
 export const button = style({
   padding: '4px 12px',
 });
+
+export const subscriptionSettingSkeleton = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '24px',
+});
+
+export const billingHistorySkeleton = style({
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: '72px',
+  alignItems: 'center',
+  justifyContent: 'center',
+});