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

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

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

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

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

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

@@ -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) {
+  if ((!settings && !settingsError) || (!data && !error)) {
-    return <div>loading</div>;
+    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}>