增加骨架屏

2024-06-25 22:47:18 +08:00 · 2024-06-25 22:47:18 +08:00 · 12d382adcb
parent 6c578fca0f
commit 12d382adcb
5 changed files with 101 additions and 38 deletions
--- a/app/page.js
+++ b/app/page.js
@ -8,7 +8,7 @@ import {
  Toast,
  InfiniteScroll,
  List,
-  Image
+  Image,
 } from "antd-mobile";
 import { AppstoreOutline } from "antd-mobile-icons";
 import PostItem from "../components/PostItem";
@ -17,6 +17,8 @@ import "./index.css";
 import Link from  "next/link"
 import BottomNav from "../components/BottomNav";
 import searchImg from "@/public/icons/search.png";
+import PostItemSkeleton from "@/components/skeletons/PostItemSkeleton";
+import { useRouter } from "next/navigation";
 const variables = {
  "@active-line-color": "#f00", // 将主题色改为红色
 };
@ -124,6 +126,7 @@ export default function Home() {
              className="p-2 overflow-y-auto scrollbarBox_hidden"
              style={{ maxHeight: `${scrollHeight}px` }}
            >
+              <PostItemSkeleton/>
              <List.Item className="!p-0">
                <PostItem />
              </List.Item>
--- a/components/skeletons/PostItemSkeleton/index.js
+++ b/components/skeletons/PostItemSkeleton/index.js
@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+import { Skeleton } from "antd-mobile";
+import styles from "./index.module.scss";
+export default function PostItemSkeleton() {
+  return (
+    <div className="flex">
+      <div className="mr-2">
+        <Skeleton animated className={styles.avatarSkeleton} />
+      </div>
+      <div>
+        <div className="mb-4 h-4 rounded-lg animate-pulse flex justify-between items-center w-full">
+          <Skeleton animated className={styles.titleSkeleton} />
+          <Skeleton animated className={styles.btnSkeleton}/>
+        </div>
+        <Skeleton.Paragraph lineCount={1} animated />
+        <div className="flex ">
+          <div className="mb-5 mr-2 w-24 h-18 rounded-lg animate-pulse">
+            <Skeleton animated className={styles.photoSkeleton} />
+          </div>
+          <div className="mb-5 mr-2 w-24 h-18 rounded-lg animate-pulse">
+            <Skeleton animated className={styles.photoSkeleton} />
+          </div>
+          <div className="mb-5 mr-2 w-24 h-18 rounded-lg animate-pulse">
+            <Skeleton animated className={styles.photoSkeleton} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/components/skeletons/PostItemSkeleton/index.module.scss
+++ b/components/skeletons/PostItemSkeleton/index.module.scss
@ -0,0 +1,20 @@
+.avatarSkeleton {
+    --width: 32px;
+    --height: 32px;
+    --border-radius: 50px;
+  }
+.titleSkeleton {
+    --width: 98px;
+    --height: 26px;
+    --border-radius: 4px;
+  }
+.photoSkeleton {
+    --width: 100%;
+    --height: 98px;
+    --border-radius: 4px;
+  }
+.btnSkeleton {
+    --width: 36px;
+    --height: 18px;
+    --border-radius: 4px;
+  }
--- a/package-lock.json
+++ b/package-lock.json
@ -14,7 +14,8 @@
        "antd-mobile": "^5.36.1",
        "next": "14.0.2",
        "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "sass": "^1.77.6"
      },
      "devDependencies": {
        "autoprefixer": "^10.0.1",
@ -562,7 +563,6 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
      "dependencies": {
        "normalize-path": "^3.0.0",
        "picomatch": "^2.0.4"
@ -629,7 +629,6 @@
      "version": "2.3.0",
      "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz",
      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      },
@ -650,7 +649,6 @@
      "version": "3.0.3",
      "resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz",
      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
      "dependencies": {
        "fill-range": "^7.1.1"
      },
@ -733,7 +731,6 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
      "dependencies": {
        "anymatch": "~3.1.2",
        "braces": "~3.0.2",
@ -757,7 +754,6 @@
      "version": "5.1.2",
      "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
      "dependencies": {
        "is-glob": "^4.0.1"
      },
@ -1006,7 +1002,6 @@
      "version": "7.1.1",
      "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz",
      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
      "dependencies": {
        "to-regex-range": "^5.0.1"
      },
@ -1047,7 +1042,6 @@
      "version": "2.3.3",
      "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
      "hasInstallScript": true,
      "optional": true,
      "os": [
@ -1151,6 +1145,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ=="
+    },
    "node_modules/intersection-observer": {
      "version": "0.12.2",
      "resolved": "https://registry.npmmirror.com/intersection-observer/-/intersection-observer-0.12.2.tgz",
@ -1160,7 +1159,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
      "dependencies": {
        "binary-extensions": "^2.0.0"
      },
@ -1187,7 +1185,6 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@ -1205,7 +1202,6 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
      "dependencies": {
        "is-extglob": "^2.1.1"
      },
@ -1217,7 +1213,6 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
      "engines": {
        "node": ">=0.12.0"
      }
@ -1629,7 +1624,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@ -1716,7 +1710,6 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
      "engines": {
        "node": ">=8.6"
      },
@ -2010,7 +2003,6 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
      "dependencies": {
        "picomatch": "^2.2.1"
      },
@ -2091,6 +2083,22 @@
      "optional": true,
      "peer": true
    },
+    "node_modules/sass": {
+      "version": "1.77.6",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.77.6.tgz",
+      "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/sax": {
      "version": "1.4.1",
      "resolved": "https://registry.npmmirror.com/sax/-/sax-1.4.1.tgz",
@ -2423,7 +2431,6 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
      "dependencies": {
        "is-number": "^7.0.0"
      },
@ -2981,7 +2988,6 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
      "requires": {
        "normalize-path": "^3.0.0",
        "picomatch": "^2.0.4"
@ -3021,8 +3027,7 @@
    "binary-extensions": {
      "version": "2.3.0",
      "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="
    },
    "brace-expansion": {
      "version": "2.0.1",
@ -3037,7 +3042,6 @@
      "version": "3.0.3",
      "resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz",
      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
      "requires": {
        "fill-range": "^7.1.1"
      }
@ -3077,7 +3081,6 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
      "requires": {
        "anymatch": "~3.1.2",
        "braces": "~3.0.2",
@ -3093,7 +3096,6 @@
          "version": "5.1.2",
          "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-          "dev": true,
          "requires": {
            "is-glob": "^4.0.1"
          }
@ -3297,7 +3299,6 @@
      "version": "7.1.1",
      "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz",
      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
      "requires": {
        "to-regex-range": "^5.0.1"
      }
@ -3322,7 +3323,6 @@
      "version": "2.3.3",
      "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
      "optional": true
    },
    "function-bind": {
@ -3392,6 +3392,11 @@
      "optional": true,
      "peer": true
    },
+    "immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ=="
+    },
    "intersection-observer": {
      "version": "0.12.2",
      "resolved": "https://registry.npmmirror.com/intersection-observer/-/intersection-observer-0.12.2.tgz",
@ -3401,7 +3406,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
      "requires": {
        "binary-extensions": "^2.0.0"
      }
@ -3418,8 +3422,7 @@
    "is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
    },
    "is-fullwidth-code-point": {
      "version": "3.0.0",
@ -3431,7 +3434,6 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
      "requires": {
        "is-extglob": "^2.1.1"
      }
@ -3439,8 +3441,7 @@
    "is-number": {
      "version": "7.0.0",
      "resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
    },
    "is-plain-object": {
      "version": "2.0.4",
@ -3707,8 +3708,7 @@
    "normalize-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
    },
    "normalize-range": {
      "version": "0.1.2",
@ -3770,8 +3770,7 @@
    "picomatch": {
      "version": "2.3.1",
      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
    },
    "pify": {
      "version": "2.3.0",
@ -3949,7 +3948,6 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
      "requires": {
        "picomatch": "^2.2.1"
      }
@ -4003,6 +4001,16 @@
      "optional": true,
      "peer": true
    },
+    "sass": {
+      "version": "1.77.6",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.77.6.tgz",
+      "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
    "sax": {
      "version": "1.4.1",
      "resolved": "https://registry.npmmirror.com/sax/-/sax-1.4.1.tgz",
@ -4238,7 +4246,6 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
      "requires": {
        "is-number": "^7.0.0"
      }
--- a/package.json
+++ b/package.json
@ -15,7 +15,8 @@
    "antd-mobile": "^5.36.1",
    "next": "14.0.2",
    "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "sass": "^1.77.6"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",