chore: update Loading

src/client/theme-default/slots/Loading/index.less

@@ -0,0 +1,66 @@
+@import (reference) '../../styles/variables.less';
+
+@skeleton-cls: react-loading-skeleton;
+
+.@{prefix}-loading-skeleton {
+  // title
+  .@{skeleton-cls}.title {
+    margin-block-end: 0.5em;
+  }
+
+  // action-item
+  .@{skeleton-cls}.code-action-item {
+    margin-inline-end: 1em;
+  }
+
+  // description
+  & > .description {
+    & > *:first-child {
+      display: inline-block;
+      width: calc(100% - 2em);
+      margin-inline-start: 2em;
+    }
+  }
+
+  .demo-block {
+    border: 1px solid @c-border-light;
+    border-radius: 2px;
+    min-height: 180px;
+    margin-block: 1em;
+    padding: 0.5em;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    @{dark-selector} & {
+      border-color: @c-border-less-dark;
+    }
+
+    & > .content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+    }
+
+    & > .actions {
+      text-align: center;
+    }
+
+    & + .demo-block {
+      margin-inline-start: 1em;
+    }
+  }
+
+  & > .demo-bock-guid {
+    @media @mobile {
+      display: none;
+    }
+
+    display: flex;
+
+    .demo-block {
+      flex: 1;
+    }
+  }
+}

src/client/theme-default/slots/Loading/index.tsx

@@ -1,29 +1,73 @@
 import React from 'react';
-import Skeleton from 'react-loading-skeleton';
+import type { SkeletonProps } from 'react-loading-skeleton';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
+import './index.less';
 
-function CodeActionSkeletonItem({ children }: React.PropsWithChildren) {
-  return <span style={{ marginInlineEnd: '0.5rem' }}>{children}</span>;
-}
+const TitleSkeleton = (props: SkeletonProps) => (
+  <Skeleton
+    width={Math.floor(Math.random() * 200) + 120}
+    height={24}
+    {...props}
+    className="title"
+  />
+);
+
+const DescriptionSkeleton = () => (
+  <div className="description">
+    <Skeleton count={1} />
+    <Skeleton count={Math.floor(Math.random() * 5)} />
+    <Skeleton count={1} width="60%" />
+  </div>
+);
+
+const CodeActionSkeleton = ({ count = 5, ...rest }: SkeletonProps) => (
+  <Skeleton
+    count={count}
+    inline
+    {...rest}
+    className="code-action-item"
+    width={20}
+    height={20}
+  />
+);
+
+const DemoBlockSkeleton = ({ children }: React.PropsWithChildren) => (
+  <div className="demo-block">
+    <div className="content">{children}</div>
+    <div className="actions">
+      <CodeActionSkeleton />
+    </div>
+  </div>
+);
 
 const Loading: React.FC = () => {
   return (
-    <>
-      <Skeleton count={3} />
-      <div
-        style={{
-          textAlign: 'center',
-        }}
-      >
-        <Skeleton
-          count={5}
-          wrapper={CodeActionSkeletonItem}
-          inline
-          width={60}
-        />
-      </div>
-      <Skeleton count={1} />
-    </>
+    <div className="dumi-default-loading-skeleton">
+      <SkeletonTheme>
+        <TitleSkeleton />
+        <DescriptionSkeleton />
+        <DemoBlockSkeleton>
+          <Skeleton height={10} />
+          <Skeleton height={20} width="20%" />
+          <Skeleton height={30} width="60%" />
+        </DemoBlockSkeleton>
+        <TitleSkeleton />
+        <div className="demo-bock-guid">
+          <DemoBlockSkeleton>
+            <Skeleton height={10} />
+            <Skeleton height={30} width="10%" />
+            <Skeleton height={20} width="70%" />
+          </DemoBlockSkeleton>
+          <DemoBlockSkeleton>
+            <Skeleton height={10} />
+            <Skeleton height={20} width="50%" />
+            <Skeleton height={30} width="30%" />
+          </DemoBlockSkeleton>
+        </div>
+        <DescriptionSkeleton />
+      </SkeletonTheme>
+    </div>
   );
 };