From 55900e3b3758465902be3ec5e9ac067f6dba9773 Mon Sep 17 00:00:00 2001
From: "wkylin.w@gmail.com" <wkylin.w@gmail.com>
Date: Thu, 26 Dec 2024 19:39:19 +0800
Subject: [PATCH] feat: skeleton

---
 .../stateless/AnimateWave/index.module.less   |  1 -
 .../stateless/SkeletonFix/index.jsx           | 17 +++++
 .../stateless/SkeletonFix/index.module.less   | 63 +++++++++++++++++++
 src/pages/home/index.jsx                      |  4 ++
 4 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 src/components/stateless/SkeletonFix/index.jsx
 create mode 100644 src/components/stateless/SkeletonFix/index.module.less

diff --git a/src/components/stateless/AnimateWave/index.module.less b/src/components/stateless/AnimateWave/index.module.less
index ecffb167..b463ed58 100644
--- a/src/components/stateless/AnimateWave/index.module.less
+++ b/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) {
diff --git a/src/components/stateless/SkeletonFix/index.jsx b/src/components/stateless/SkeletonFix/index.jsx
new file mode 100644
index 00000000..67d75ed4
--- /dev/null
+++ b/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
diff --git a/src/components/stateless/SkeletonFix/index.module.less b/src/components/stateless/SkeletonFix/index.module.less
new file mode 100644
index 00000000..83a1e991
--- /dev/null
+++ b/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%);
+  }
+}
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 7128f833..21cdd59d 100644
--- a/src/pages/home/index.jsx
+++ b/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">