Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

feat(console): dashboard skeleton (#1077)

Browse source
This commit is contained in:
Wang Sijie 2022-06-09 16:12:10 +08:00 committed by GitHub
parent c38fab89e1
commit 5afbe9d70b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 84 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
packages/console/src/pages/Dashboard/components/Skeleton/index.module.scss Normal file
View file

@ -0,0 +1,47 @@
@use '@/scss/underscore' as _;
.title {
@include _.shimmering-animation;
height: 24px;
margin-bottom: _.unit(6);
}
.number {
@include _.shimmering-animation;
height: 32px;
}
.blocks {
display: flex;
align-items: center;
margin-bottom: _.unit(4);
}
.block {
flex: 1;
&:not(:last-child) {
margin-right: _.unit(4);
}
}
.dau {
width: 300px;
}
.curve {
@include _.shimmering-animation;
margin: _.unit(10) 0 _.unit(6);
height: 168px;
}
.activeBlocks {
display: flex;
align-items: center;
.block {
border: 1px solid var(--color-divider);
width: 360px;
flex: unset;
}
}

35
packages/console/src/pages/Dashboard/components/Skeleton/index.tsx Normal file
View file

@ -0,0 +1,35 @@
import React from 'react';
import Card from '@/components/Card';
import * as styles from './index.module.scss';
const Skeleton = () => (
<div>
<div className={styles.blocks}>
{[...Array.from({ length: 3 }).keys()].map((index) => (
<Card key={index} className={styles.block}>
<div className={styles.title} />
<div className={styles.number} />
</Card>
))}
</div>
<Card>
<div className={styles.dau}>
<div className={styles.title} />
<div className={styles.number} />
</div>
<div className={styles.curve} />
<div className={styles.activeBlocks}>
{[...Array.from({ length: 2 }).keys()].map((index) => (
<Card key={index} className={styles.block}>
<div className={styles.title} />
<div className={styles.number} />
</Card>
))}
</div>
</Card>
</div>
);
export default Skeleton;

2
packages/console/src/pages/Dashboard/index.tsx
View file

@ -14,6 +14,7 @@ import useSWR from 'swr';
import Card from '@/components/Card';
import Block from './components/Block';
import Skeleton from './components/Skeleton';
import * as styles from './index.module.scss';
import { ActiveUsersResponse, NewUsersResponse, TotalUsersResponse } from './types';
@ -31,6 +32,7 @@ const Dashboard = () => {
<div className={styles.title}>{t('dashboard.title')}</div>
<div className={styles.subtitle}>{t('dashboard.description')}</div>
</div>
{isLoading && <Skeleton />}
{!isLoading && (
<>
<div className={styles.blocks}>