Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-24 22:41:28 -05:00
Code Issues Activity

feat(console): table loading component (#441)

Browse source
This commit is contained in:
Wang Sijie 2022-03-24 11:48:39 +08:00 • committed by GitHub
parent 04ba181a64
commit d2c0f623c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 117 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
packages/console/src/components/Table/ItemPreviewLoading.module.scss Normal file
View file

@ -0,0 +1,33 @@
@use '@/scss/underscore' as _;
td > div.loading {
display: flex;
background: none;
height: 50px;
border-radius: unset;
.avatar {
width: 50px;
height: 50px;
border-radius: _.unit(2);
margin-right: _.unit(4);
background: var(--color-neutral-95);
}
.content {
flex: 1;
.title {
background: var(--color-neutral-95);
border-radius: _.unit(2);
height: 16px;
margin: _.unit(2) 0;
}
.subTitle {
background: var(--color-neutral-95);
border-radius: _.unit(2);
height: 12px;
}
}
}

15
packages/console/src/components/Table/ItemPreviewLoading.tsx Normal file
View file

@ -0,0 +1,15 @@
import React from 'react';
import * as styles from './ItemPreviewLoading.module.scss';
const ItemPreviewLoading = () => (
<div className={styles.loading}>
<div className={styles.avatar} />
<div className={styles.content}>
<div className={styles.title} />
<div className={styles.subTitle} />
</div>
</div>
);
export default ItemPreviewLoading;

9
packages/console/src/components/Table/TableLoading.module.scss Normal file
View file

@ -0,0 +1,9 @@
@use '@/scss/underscore' as _;
.loading {
td > div {
border-radius: _.unit(2);
background: var(--color-neutral-95);
height: 32px;
}
}

18
packages/console/src/components/Table/TableLoading.tsx Normal file
View file

@ -0,0 +1,18 @@
import React, { ReactNode } from 'react';
import * as styles from './TableLoading.module.scss';
export { default as ItemPreviewLoading } from './ItemPreviewLoading';
type Props = {
children: ReactNode;
};
const TableLoading = ({ children }: Props) => (
<>
<tr className={styles.loading}>{children}</tr>
<tr className={styles.loading}>{children}</tr>
</>
);
export default TableLoading;

12
packages/console/src/pages/ApiResources/index.tsx
View file

@ -13,6 +13,7 @@ import CardTitle from '@/components/CardTitle';
import CopyToClipboard from '@/components/CopyToClipboard';
import ImagePlaceholder from '@/components/ImagePlaceholder';
import ItemPreview from '@/components/ItemPreview';
import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
import { RequestError } from '@/hooks/use-api';
import * as modalStyles from '@/scss/modal.module.scss';
@ -73,9 +74,14 @@ const ApiResources = () => {
</tr>
)}
{isLoading && (
<tr>
<td colSpan={2}>loading</td>
</tr>
<TableLoading>
<td className={styles.apiResourceName}>
<ItemPreviewLoading />
</td>
<td>
<div />
</td>
</TableLoading>
)}
{data?.map(({ id, name, indicator }) => (
<tr

12
packages/console/src/pages/Applications/index.tsx
View file

@ -13,6 +13,7 @@ import CardTitle from '@/components/CardTitle';
import CopyToClipboard from '@/components/CopyToClipboard';
import ImagePlaceholder from '@/components/ImagePlaceholder';
import ItemPreview from '@/components/ItemPreview';
import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
import { RequestError } from '@/hooks/use-api';
import * as modalStyles from '@/scss/modal.module.scss';
import { applicationTypeI18nKey } from '@/types/applications';
@ -71,9 +72,14 @@ const Applications = () => {
</tr>
)}
{isLoading && (
<tr>
<td colSpan={2}>loading</td>
</tr>
<TableLoading>
<td className={styles.applicationName}>
<ItemPreviewLoading />
</td>
<td>
<div />
</td>
</TableLoading>
)}
{data?.map(({ id, name, type }) => (
<tr

15
packages/console/src/pages/Connectors/index.tsx
View file

@ -9,6 +9,7 @@ import Button from '@/components/Button';
import Card from '@/components/Card';
import CardTitle from '@/components/CardTitle';
import TabNav, { TabNavLink } from '@/components/TabNav';
import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
import { RequestError } from '@/hooks/use-api';
import ConnectorRow from './components/ConnectorRow';
@ -79,9 +80,17 @@ const Connectors = () => {
</tr>
)}
{isLoading && (
<tr>
<td colSpan={3}>loading</td>
</tr>
<TableLoading>
<td className={styles.connectorName}>
<ItemPreviewLoading />
</td>
<td>
<div />
</td>
<td>
<div />
</td>
</TableLoading>
)}
{socialConnectors?.length === 0 && (
<tr>

15
packages/console/src/pages/Users/index.tsx
View file

@ -10,6 +10,7 @@ import Card from '@/components/Card';
import CardTitle from '@/components/CardTitle';
import ImagePlaceholder from '@/components/ImagePlaceholder';
import ItemPreview from '@/components/ItemPreview';
import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
import { RequestError } from '@/hooks/use-api';
import * as modalStyles from '@/scss/modal.module.scss';
@ -65,9 +66,17 @@ const Users = () => {
</tr>
)}
{isLoading && (
<tr>
<td colSpan={2}>loading</td>
</tr>
<TableLoading>
<td className={styles.userName}>
<ItemPreviewLoading />
</td>
<td>
<div />
</td>
<td>
<div />
</td>
</TableLoading>
)}
{data?.map(({ id, name, username }) => (
<tr