xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style(comment): redesign comment list skeleton to match real list layout

Browse Source
This commit is contained in:
xfy 2026-07-08 15:30:32 +08:00
parent 9e70fd9893
commit 42548d5c3a
1 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/skeletons/comment_skeleton.rs
View File

@ -1,42 +1,46 @@
//! 评论列表骨架屏
//!
//! 在评论数据加载期间展示评论条目占位。
//! 在评论数据加载期间展示评论条目占位，结构和间距与真实评论列表一致。
use crate::components::skeletons::atoms::*;
use dioxus::prelude::*;
/// 评论列表骨架屏组件。
///
/// 渲染一个标题占位与若干条评论条目占位，包含头像、作者名与内容行。
/// 渲染若干条评论条目占位，包含头像、作者名与内容行，样式与真实评论项对齐。
#[component]
pub fn CommentListSkeleton() -> Element {
rsx! {
div { class: "animate-pulse space-y-6",
div { class: "h-8 w-32 bg-paper-tertiary/30 rounded mb-6" }
div { class: "space-y-4 bg-paper-tertiary/30 rounded-lg p-4",
div { class: "divide-y divide-gray-100 dark:divide-gray-700",
// 第一条评论占位（顶层评论）
div { class: "py-4",
div { class: "flex gap-3",
div { class: "w-10 h-10 rounded-full bg-paper-tertiary/50 shrink-0" }
SkeletonBox { class: "w-8 h-8 rounded-full shrink-0 mt-0.5" }
div { class: "flex-1 space-y-2",
SkeletonBox { class: "h-4 w-1/4 rounded" }
SkeletonBox { class: "h-3 w-3/4 rounded" }
SkeletonBox { class: "h-4 w-24 rounded" }
SkeletonBox { class: "h-3.5 w-full rounded" }
SkeletonBox { class: "h-3.5 w-2/3 rounded" }
}
}
}
div { class: "space-y-4 bg-paper-tertiary/30 rounded-lg p-4 ml-6",
// 第二条评论占位（子回复，缩进 ml-6 即 24px）
div { class: "py-4 ml-6",
div { class: "flex gap-3",
div { class: "w-10 h-10 rounded-full bg-paper-tertiary/50 shrink-0" }
SkeletonBox { class: "w-8 h-8 rounded-full shrink-0 mt-0.5" }
div { class: "flex-1 space-y-2",
SkeletonBox { class: "h-4 w-1/4 rounded" }
SkeletonBox { class: "h-3 w-3/4 rounded" }
SkeletonBox { class: "h-4 w-20 rounded" }
SkeletonBox { class: "h-3.5 w-3/4 rounded" }
}
}
}
div { class: "space-y-4 bg-paper-tertiary/30 rounded-lg p-4",
// 第三条评论占位（另一条顶层评论）
div { class: "py-4",
div { class: "flex gap-3",
div { class: "w-10 h-10 rounded-full bg-paper-tertiary/50 shrink-0" }
SkeletonBox { class: "w-8 h-8 rounded-full shrink-0 mt-0.5" }
div { class: "flex-1 space-y-2",
SkeletonBox { class: "h-4 w-1/4 rounded" }
SkeletonBox { class: "h-3 w-3/4 rounded" }
SkeletonBox { class: "h-4 w-28 rounded" }
SkeletonBox { class: "h-3.5 w-full rounded" }
SkeletonBox { class: "h-3.5 w-1/2 rounded" }
}
}
}