refactor(console): update loading skeletons (#2660)

packages/console/src/components/DetailsSkeleton/index.module.scss

@@ -6,6 +6,10 @@
   flex-direction: column;
   overflow-y: auto;
 
+  >:not(:first-child) {
+    margin-top: _.unit(4);
+  }
+
   .header {
     display: flex;
     align-items: center;
@@ -46,42 +50,43 @@
     }
   }
 
-  .content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    padding: _.unit(6);
-    margin-top: _.unit(6);
-    border-radius: 16px;
-    background-color: var(--color-layer-1);
-
   .tabBar {
-      @include _.shimmering-animation;
     width: 100%;
-      height: 25px;
+    height: 28px;
-      margin-bottom: _.unit(13.5);
+    @include _.shimmering-animation;
   }
 
+  .content {
+    .introduction {
+      .title {
+        @include _.shimmering-animation;
+        height: 16px;
+        width: 80px;
+      }
+
+      .description {
+        .text {
+          @include _.shimmering-animation;
+          width: 100%;
+          height: 10px;
+        }
+
+        .text + .text {
+          margin-top: _.unit(2);
+        }
+      }
+    }
+
+    .form {
       .field {
         @include _.shimmering-animation;
-      width: 566px;
+        width: 100%;
         height: 44px;
       }
 
       .field + .field {
         margin-top: _.unit(6);
       }
-
-    .footer {
-      display: flex;
-      justify-content: end;
-
-      .button {
-        @include _.shimmering-animation;
-        width: 194px;
-        height: 44px;
-      }
     }
   }
 }

packages/console/src/components/DetailsSkeleton/index.tsx

@@ -1,3 +1,7 @@
+import classNames from 'classnames';
+
+import Card from '@/components/Card';
+import * as formCardStyles from '@/components/FormCard/index.module.scss';
 import Spacer from '@/components/Spacer';
 
 import * as styles from './index.module.scss';
@@ -13,17 +17,24 @@ const DetailsSkeleton = () => (
       <Spacer />
       <div className={styles.button} />
     </div>
-    <div className={styles.content}>
     <div className={styles.tabBar} />
+    <Card className={classNames(formCardStyles.container, styles.content)}>
+      <div className={classNames(formCardStyles.introduction, styles.introduction)}>
+        <div className={styles.title} />
+        <div className={styles.description}>
+          {Array.from({ length: 2 }).map((_, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <div key={index} className={styles.text} />
+          ))}
+        </div>
+      </div>
+      <div className={classNames(formCardStyles.form, styles.form)}>
         {Array.from({ length: 4 }).map((_, index) => (
           // eslint-disable-next-line react/no-array-index-key
           <div key={index} className={styles.field} />
         ))}
-      <Spacer />
-      <div className={styles.footer}>
-        <div className={styles.button} />
-      </div>
       </div>
+    </Card>
   </div>
 );
 

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

@@ -1,73 +1,49 @@
 @use '@/scss/underscore' as _;
 
 .container {
-  display: flex;
+  .tabBar {
-  align-items: stretch;
+    width: 100%;
-  min-width: 950px;
+    height: 28px;
-  height: 100%;
+    @include _.shimmering-animation;
-
-  > * {
-    display: flex;
-    flex-direction: column;
-    background: var(--color-layer-1);
-    border-radius: 16px;
   }
 
-  .setup {
+  .content {
-    flex: 1;
+    .card {
-    margin-right: _.unit(3);
+      background-color: var(--color-layer-1);
-    height: 100%;
+      border-radius: 16px;
       padding: _.unit(6);
 
+      >:not(:first-child) {
+        margin-top: _.unit(6);
+      }
+
       .title {
-      width: 113px;
-      height: 20px;
         @include _.shimmering-animation;
-    }
+        width: 80px;
-
-    .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 {
+        @include _.shimmering-animation;
         width: 100%;
         height: 44px;
-      margin-top: _.unit(6);
-      @include _.shimmering-animation;
       }
 
-    .footer {
+      &:not(:first-child) {
-      display: flex;
+        margin-top: _.unit(3);
-      width: 100%;
-      justify-content: right;
-
-      .button {
-        width: 194px;
-        height: 44px;
-        @include _.shimmering-animation;
-      }
       }
     }
 
     .preview {
-    width: 480px;
+      flex: 1;
-    overflow: hidden;
 
       .header {
         display: flex;
         width: 100%;
         height: 103px;
         padding: _.unit(6);
+        background-color: var(--color-layer-1);
+        border-radius: 16px 16px 0 0;
 
         .info {
           .title {
@@ -92,20 +68,24 @@
         }
       }
 
-    .content {
+      .previewContent {
         background: var(--color-surface-variant);
+        padding: _.unit(6);
+        border-radius: 0 0 16px 16px;
+        height: 450px;
+        overflow: hidden;
 
         .mobile {
           display: flex;
           flex-direction: column;
           align-items: center;
-        width: 300px;
+          width: 375px;
-        height: 649px;
+          height: 667px;
           background: var(--color-surface);
-        margin: _.unit(10) auto 0;
+          margin: 0 auto;
           padding: _.unit(6);
           border-radius: 16px;
-        transform: scale(0.65);
+          transform: scale(0.6);
           transform-origin: top;
 
           .logo {
@@ -146,3 +126,4 @@
       }
     }
   }
+}

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

@@ -1,23 +1,35 @@
+import classNames from 'classnames';
+
+import CardTitle from '@/components/CardTitle';
 import Spacer from '@/components/Spacer';
 
+import * as pageStyles from '../../index.module.scss';
 import * as styles from './index.module.scss';
 
 const Skeleton = () => {
   return (
-    <div className={styles.container}>
+    <div className={classNames(pageStyles.container, styles.container)}>
-      <div className={styles.setup}>
+      <CardTitle
+        title="sign_in_exp.title"
+        subtitle="sign_in_exp.description"
+        className={pageStyles.cardTitle}
+      />
+      <div className={classNames(pageStyles.tabs, styles.tabBar)} />
+      <div className={classNames(pageStyles.content, styles.content)}>
+        <div className={pageStyles.contentTop}>
+          <div className={pageStyles.form}>
+            <div className={styles.card}>
               <div className={styles.title} />
-        <div className={styles.subtitle} />
-        <div className={styles.tabs} />
               <div className={styles.field} />
               <div className={styles.field} />
+            </div>
+            <div className={styles.card}>
+              <div className={styles.title} />
               <div className={styles.field} />
               <div className={styles.field} />
-        <Spacer />
-        <div className={styles.footer}>
-          <div className={styles.button} />
             </div>
           </div>
+          <div className={pageStyles.preview}>
             <div className={styles.preview}>
               <div className={styles.header}>
                 <div className={styles.info}>
@@ -28,7 +40,7 @@ const Skeleton = () => {
                 <div className={styles.button} />
                 <div className={styles.button} />
               </div>
-        <div className={styles.content}>
+              <div className={styles.previewContent}>
                 <div className={styles.mobile}>
                   <div className={styles.logo} />
                   <div className={styles.slogan} />
@@ -40,6 +52,9 @@ const Skeleton = () => {
               </div>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
   );
 };