mirror of
https://github.com/logto-io/logto.git
synced 2025-01-06 20:40:08 -05:00
Merge pull request #1370 from logto-io/charles-log-3354-sign-in-experience-loading-skeleton
feat(console): add loading skeleton to sign in experience page
This commit is contained in:
Charles Zhao
GitHub
commit
97d3351d44
3 changed files with 199 additions and 3 deletions
|
|
@ -0,0 +1,148 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
min-width: 950px;
|
||||
height: 100%;
|
||||
|
||||
> * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--color-layer-1);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.setup {
|
||||
flex: 1;
|
||||
margin-right: _.unit(3);
|
||||
height: 100%;
|
||||
padding: _.unit(6);
|
||||
|
||||
.title {
|
||||
width: 113px;
|
||||
height: 20px;
|
||||
@include _.shimmering-animation;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
width: 177px;
|
||||
height: 16px;
|
||||
margin-top: _.unit(4);
|
||||
@include _.shimmering-animation;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 498px;
|
||||
height: 25px;
|
||||
margin: _.unit(6) 0 _.unit(15.5);
|
||||
@include _.shimmering-animation;
|
||||
}
|
||||
|
||||
.field {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
margin-top: _.unit(6);
|
||||
@include _.shimmering-animation;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: right;
|
||||
|
||||
.button {
|
||||
width: 194px;
|
||||
height: 44px;
|
||||
@include _.shimmering-animation;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
width: 480px;
|
||||
overflow: hidden;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 103px;
|
||||
padding: _.unit(6);
|
||||
|
||||
.info {
|
||||
.title {
|
||||
width: 113px;
|
||||
height: 20px;
|
||||
@include _.shimmering-animation;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
width: 177px;
|
||||
height: 16px;
|
||||
margin-top: _.unit(4);
|
||||
@include _.shimmering-animation;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 104px;
|
||||
height: 30px;
|
||||
margin-left: _.unit(2.5);
|
||||
@include _.shimmering-animation;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
background: var(--color-surface-variant);
|
||||
|
||||
.mobile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
height: 649px;
|
||||
background: var(--color-surface);
|
||||
margin: _.unit(10) auto 0;
|
||||
padding: _.unit(6);
|
||||
border-radius: 16px;
|
||||
transform: scale(0.65);
|
||||
transform-origin: top;
|
||||
|
||||
.logo {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-top: _.unit(16);
|
||||
@include _.shimmering-animation;
|
||||
}
|
||||
|
||||
.slogan {
|
||||
width: 177px;
|
||||
height: 16px;
|
||||
margin: _.unit(3) 0 _.unit(10);
|
||||
@include _.shimmering-animation;
|
||||
}
|
||||
|
||||
.field {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
margin-top: _.unit(3);
|
||||
@include _.shimmering-animation;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
margin-top: _.unit(10);
|
||||
@include _.shimmering-animation;
|
||||
}
|
||||
|
||||
.social {
|
||||
width: 180px;
|
||||
height: 24px;
|
||||
margin-top: _.unit(3);
|
||||
@include _.shimmering-animation;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react';
|
||||
|
||||
import Spacer from '@/components/Spacer';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
const Skeleton = () => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.setup}>
|
||||
<div className={styles.title} />
|
||||
<div className={styles.subtitle} />
|
||||
<div className={styles.tabs} />
|
||||
<div className={styles.field} />
|
||||
<div className={styles.field} />
|
||||
<div className={styles.field} />
|
||||
<div className={styles.field} />
|
||||
<Spacer />
|
||||
<div className={styles.footer}>
|
||||
<div className={styles.button} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.preview}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.info}>
|
||||
<div className={styles.title} />
|
||||
<div className={styles.subtitle} />
|
||||
</div>
|
||||
<Spacer />
|
||||
<div className={styles.button} />
|
||||
<div className={styles.button} />
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.mobile}>
|
||||
<div className={styles.logo} />
|
||||
<div className={styles.slogan} />
|
||||
<div className={styles.field} />
|
||||
<div className={styles.field} />
|
||||
<div className={styles.button} />
|
||||
<div className={styles.social} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Skeleton;
|
||||
|
|
@ -22,6 +22,7 @@ import LanguagesForm from './components/LanguagesForm';
|
|||
import Preview from './components/Preview';
|
||||
import SignInMethodsChangePreview from './components/SignInMethodsChangePreview';
|
||||
import SignInMethodsForm from './components/SignInMethodsForm';
|
||||
import Skeleton from './components/Skeleton';
|
||||
import TermsForm from './components/TermsForm';
|
||||
import Welcome from './components/Welcome';
|
||||
import usePreviewConfigs from './hooks';
|
||||
|
|
@ -83,8 +84,8 @@ const SignInExperience = () => {
|
|||
await saveData();
|
||||
});
|
||||
|
||||
if (!settings && !settingsError) {
|
||||
return <div>loading</div>;
|
||||
if ((!settings && !settingsError) || (!data && !error)) {
|
||||
return <Skeleton />;
|
||||
}
|
||||
|
||||
if (!settings && settingsError) {
|
||||
|
|
@ -111,7 +112,6 @@ const SignInExperience = () => {
|
|||
{t('sign_in_exp.tabs.others')}
|
||||
</TabNavItem>
|
||||
</TabNav>
|
||||
{!data && !error && <div>loading</div>}
|
||||
{!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
|
||||
{data && (
|
||||
<FormProvider {...methods}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue