feat(core): payment billing loading (#4763)

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 fallback={<SubscriptionSettingSkeleton />}>
-      <Suspense>
         <SettingWrapper
           title={t['com.affine.payment.billing-setting.information']()}
         >
           <SubscriptionSettings />
         </SettingWrapper>
       </Suspense>
-      {/* TODO: loading fallback */}
+      <Suspense fallback={<BillingHistorySkeleton />}>
-      <Suspense>
         <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>
+  );
+};

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',
+});