feat: skeleton

src/components/stateless/AnimateWave/index.module.less

@@ -85,7 +85,6 @@
   opacity: 0;
   position: absolute;
   top: 2px;
-  box-shadow: 0 60px 25px -20px rgb(0 0 0 / 50%);
 }
 
 .droppingTexts > div:nth-child(1) {

src/components/stateless/SkeletonFix/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import styles from './index.module.less'
+
+const SkeletonFix = () => {
+  return (
+    <div className={`${styles.placeholder} ${styles.shimmer}`}>
+      <div className={styles['faux-image-wrapper']}>
+        <div className={styles['faux-image']}></div>
+      </div>
+      <div className={styles['faux-text']}></div>
+      <div className={`${styles['faux-text']} ${styles.short}`}></div>
+      <div className={`${styles['faux-text']} ${styles['min-short']}`}></div>
+    </div>
+  )
+}
+
+export default SkeletonFix

src/components/stateless/SkeletonFix/index.module.less

@@ -0,0 +1,63 @@
+.placeholder {
+  width: 100%;
+}
+
+.faux-image-wrapper {
+  margin-bottom: 10px;
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+
+.faux-image {
+  background: #ddd;
+  border-radius: 4px;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.faux-text {
+  background: #ddd;
+  border-radius: 4px;
+  height: 20px;
+  margin-bottom: 5px;
+}
+
+.faux-text.short {
+  width: 75%;
+}
+
+.faux-text.min-short {
+  width: 45%;
+}
+
+.shimmer {
+  overflow: hidden;
+  position: relative;
+}
+
+.shimmer::before {
+  content: '';
+  position: absolute;
+  background: linear-gradient(
+    90deg,
+    rgb(255 255 255 / 0%) 0%,
+    rgb(255 255 255 / 40%) 50%,
+    rgb(255 255 255 / 0%) 100%
+  );
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+  animation: shimmer 1s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}

src/pages/home/index.jsx

@@ -35,6 +35,7 @@ import ShiCode from '@stateless/ShiCode'
 // import Masonry from '@container/masonryContainer'
 import DynamicBackground from '@stateless/DynamicBackground'
 import ContentPlaceholder from '@stateless/ContentPlaceholder'
+import SkeletonFix from '@stateless/SkeletonFix'
 import { oneApiChat, prettyObject, randomNum } from '@utils/aidFn'
 import { fireConfetti } from '@utils/confetti'
 
@@ -385,6 +386,9 @@ const Home = () => {
       <section style={{ position: 'relative' }}>
         <AnimateWave />
       </section>
+      <section style={{ margin: 20 }}>
+        <SkeletonFix />
+      </section>
       <section style={{ margin: 20 }}>
         <ResponsiveMasonry columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 6 }}>
           <Masonry gutter="10px">