Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00
Code Issues Activity

refactor(console): improve tenant selector loading state (#4317)

Browse source
This commit is contained in:
Xiao Yijun 2023-08-11 16:16:04 +08:00 • committed by GitHub
parent 77d274a3c3
commit c2b379ee30
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 4 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/Skeleton/index.module.scss
View file

@ -1,8 +0,0 @@
@use '@/scss/underscore' as _;
.skeleton {
@include _.shimmering-animation;
width: 48px;
height: 16px;
border-radius: 6px;
}

7
packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/Skeleton/index.tsx
View file

@ -1,7 +0,0 @@
import * as styles from './index.module.scss';
function Skeleton() {
return <div className={styles.skeleton} />;
}
export default Skeleton;

4
packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/TenantStatusTag.tsx
View file

@ -8,8 +8,6 @@ import useSubscriptionPlan from '@/hooks/use-subscription-plan';
import useSubscriptionUsage from '@/hooks/use-subscription-usage'; import useSubscriptionUsage from '@/hooks/use-subscription-usage';
import { getLatestUnpaidInvoice } from '@/utils/subscription'; import { getLatestUnpaidInvoice } from '@/utils/subscription';
import Skeleton from './Skeleton';
type Props = { type Props = {
tenantId: string; tenantId: string;
className?: string; className?: string;
@ -30,7 +28,7 @@ function TenantStatusTag({ tenantId, className }: Props) {
); );
if (isLoadingUsage || isLoadingInvoice || isLoadingSubscription) { if (isLoadingUsage || isLoadingInvoice || isLoadingSubscription) {
return <Skeleton />; return null;
} }
/** /**

3
packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss
View file

@ -43,10 +43,11 @@
margin-top: _.unit(0.5); margin-top: _.unit(0.5);
font: var(--font-body-3); font: var(--font-body-3);
color: var(--color-text-secondary); color: var(--color-text-secondary);
// Keep the height of the item consistent when the plan name is loading
min-height: 16px;
} }
} }
.checkIcon { .checkIcon {
width: 20px; width: 20px;
height: 20px; height: 20px;

5
packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx
View file

@ -8,7 +8,6 @@ import useSubscriptionPlan from '@/hooks/use-subscription-plan';
import TenantEnvTag from '../TenantEnvTag'; import TenantEnvTag from '../TenantEnvTag';
import Skeleton from './Skeleton';
import TenantStatusTag from './TenantStatusTag'; import TenantStatusTag from './TenantStatusTag';
import * as styles from './index.module.scss'; import * as styles from './index.module.scss';
@ -30,9 +29,7 @@ function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) {
<TenantEnvTag tag={tag} /> <TenantEnvTag tag={tag} />
<TenantStatusTag tenantId={id} className={styles.statusTag} /> <TenantStatusTag tenantId={id} className={styles.statusTag} />
</div> </div>
<div className={styles.planName}> <div className={styles.planName}>{tenantPlan && <PlanName name={tenantPlan.name} />}</div>
{tenantPlan ? <PlanName name={tenantPlan.name} /> : <Skeleton />}
</div>
</div> </div>
<Tick className={classNames(styles.checkIcon, isSelected && styles.visible)} /> <Tick className={classNames(styles.checkIcon, isSelected && styles.visible)} />
</DropdownItem> </DropdownItem>