feat(console): dashboard skeleton (#1077)

packages/console/src/pages/Dashboard/components/Skeleton/index.module.scss

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

packages/console/src/pages/Dashboard/components/Skeleton/index.tsx

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

packages/console/src/pages/Dashboard/index.tsx

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