yggdrasil/components/skeletons/
comment_skeleton.rs

1//! 评论列表骨架屏
2//!
3//! 在评论数据加载期间展示评论条目占位，结构和间距与真实评论列表一致。
4
5use crate::components::skeletons::atoms::*;
6use leptos::prelude::*;
7
8/// 评论列表骨架屏组件：两条顶层评论夹一条回复，复用评论列表的类名。
9#[component]
10pub fn CommentListSkeleton() -> impl IntoView {
11    view! {
12        <div class="comment-list" aria-hidden="true">
13            <div class="comment">
14                <SkeletonBox class="comment-avatar"/>
15                <div class="comment-main flex flex-col gap-2">
16                    <SkeletonBox class="h-3.5 w-24"/>
17                    <SkeletonBox class="h-3 w-full"/>
18                    <SkeletonBox class="h-3 w-2/3"/>
19                </div>
20            </div>
21            <div class="comment is-child">
22                <SkeletonBox class="comment-avatar"/>
23                <div class="comment-main flex flex-col gap-2">
24                    <SkeletonBox class="h-3.5 w-20"/>
25                    <SkeletonBox class="h-3 w-3/4"/>
26                </div>
27            </div>
28            <div class="comment">
29                <SkeletonBox class="comment-avatar"/>
30                <div class="comment-main flex flex-col gap-2">
31                    <SkeletonBox class="h-3.5 w-28"/>
32                    <SkeletonBox class="h-3 w-full"/>
33                    <SkeletonBox class="h-3 w-1/2"/>
34                </div>
35            </div>
36        </div>
37    }
38}
yggdrasil/components/skeletons/comment_skeleton.rs

yggdrasil/components/skeletons/
comment_skeleton.rs
