yggdrasil/components/skeletons/
comment_skeleton.rs

1//! 评论列表骨架屏
2//!
3//! 在评论数据加载期间展示评论条目占位，结构和间距与真实评论列表一致。
4
5use crate::components::skeletons::atoms::*;
6use dioxus::prelude::*;
7
8/// 评论列表骨架屏组件。
9///
10/// 渲染若干条评论条目占位，包含头像、作者名与内容行，样式与真实评论项对齐。
11#[component]
12pub fn CommentListSkeleton() -> Element {
13    rsx! {
14        div { class: "divide-y divide-[var(--color-paper-border)]/40",
15            // 第一条评论占位（顶层评论）
16            div { class: "py-3.5",
17                div { class: "flex items-start gap-3",
18                    SkeletonBox { class: "w-8 h-8 rounded-full shrink-0 mt-0.5 ring-1 ring-[var(--color-paper-border)]/60" }
19                    div { class: "flex-1 space-y-2",
20                        SkeletonBox { class: "h-4 w-24 rounded-md" }
21                        SkeletonBox { class: "h-3.5 w-full rounded-md" }
22                        SkeletonBox { class: "h-3.5 w-2/3 rounded-md" }
23                    }
24                }
25            }
26            // 第二条评论占位（子回复，带导轨线）
27            div { class: "py-3.5 border-l-2 border-[var(--color-paper-border)]/50 pl-3.5 sm:pl-4.5 my-1",
28                div { class: "flex items-start gap-3",
29                    SkeletonBox { class: "w-8 h-8 rounded-full shrink-0 mt-0.5 ring-1 ring-[var(--color-paper-border)]/60" }
30                    div { class: "flex-1 space-y-2",
31                        SkeletonBox { class: "h-4 w-20 rounded-md" }
32                        SkeletonBox { class: "h-3.5 w-3/4 rounded-md" }
33                    }
34                }
35            }
36            // 第三条评论占位（另一条顶层评论）
37            div { class: "py-3.5",
38                div { class: "flex items-start gap-3",
39                    SkeletonBox { class: "w-8 h-8 rounded-full shrink-0 mt-0.5 ring-1 ring-[var(--color-paper-border)]/60" }
40                    div { class: "flex-1 space-y-2",
41                        SkeletonBox { class: "h-4 w-28 rounded-md" }
42                        SkeletonBox { class: "h-3.5 w-full rounded-md" }
43                        SkeletonBox { class: "h-3.5 w-1/2 rounded-md" }
44                    }
45                }
46            }
47        }
48    }
49}
yggdrasil/components/skeletons/comment_skeleton.rs

yggdrasil/components/skeletons/
comment_skeleton.rs
