Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-27 21:39:16 -05:00
Code Issues Activity

refactor(console): add connector loading state (#3622)

Browse source
This commit is contained in:
Xiao Yijun 2023-03-29 16:55:11 +08:00 • committed by GitHub
parent c064a71153
commit 2fc9c87553
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
packages/console/src/pages/Connectors/components/CreateForm/Skeleton.module.scss Normal file
View file

@ -0,0 +1,31 @@
@use '@/scss/underscore' as _;
.connector {
padding: 12px;
border-radius: 16px;
border: 1px solid var(--color-neutral-90);
}
.logo {
@include _.shimmering-animation;
width: 40px;
height: 40px;
border-radius: 8px;
}
.name {
@include _.shimmering-animation;
width: 50px;
height: 16px;
margin-bottom: _.unit(1);
}
.description {
@include _.shimmering-animation;
height: 14px;
margin-bottom: _.unit(0.5);
&.shortDescription {
width: 50%;
}
}

26
packages/console/src/pages/Connectors/components/CreateForm/Skeleton.tsx Normal file
View file

@ -0,0 +1,26 @@
import classNames from 'classnames';
import * as styles from './Skeleton.module.scss';
import * as layout from './index.module.scss';
function Skeleton() {
return (
<div className={layout.connectorGroup}>
{Array.from({ length: 8 }).map((_, index) => (
// eslint-disable-next-line react/no-array-index-key
<div key={index} className={classNames(layout.connector, styles.connector)}>
<div className={styles.logo} />
<div className={layout.content}>
<div className={styles.name} />
<div>
<div className={styles.description} />
<div className={classNames(styles.description, styles.shortDescription)} />
</div>
</div>
</div>
))}
</div>
);
}
export default Skeleton;

3
packages/console/src/pages/Connectors/components/CreateForm/index.tsx
View file

@ -16,6 +16,7 @@ import * as modalStyles from '@/scss/modal.module.scss';
import { getConnectorGroups } from '../../utils';
import PlatformSelector from './PlatformSelector';
import Skeleton from './Skeleton';
import * as styles from './index.module.scss';
import { getConnectorOrder } from './utils';
@ -140,7 +141,7 @@ function CreateForm({ onClose, isOpen: isFormOpen, type }: Props) {
size={modalSize}
onClose={onClose}
>
{isLoading && 'Loading...'}
{isLoading && <Skeleton />}
{factoriesError?.message ?? connectorsError?.message}
<RadioGroup
name="group"