toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-27 04:48:28 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Cats Juice 2023-10-31 17:00:19 +08:00 committed by GitHub
parent f08408ebe5
commit 7d6c096462
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx
View File

@ -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>
);
};

14
packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/style.css.ts
View File

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