Skip to main content

yggdrasil/components/skeletons/
admin_comments_skeleton.rs

1//! 后台评论管理骨架屏
2//!
3//! 与评论管理同一版式:标题行、状态选项卡与评论流。
4
5use leptos::prelude::*;
6
7use crate::components::skeletons::atoms::{AdminPageHeadSkeleton, SkeletonBox};
8
9/// 评论流骨架(列表加载中使用)。
10#[component]
11pub fn AdminCommentsListSkeleton() -> impl IntoView {
12    view! {
13        <div class="admin-panel admin-comment-list" aria-hidden="true">
14            {(0..5)
15                .map(|_| {
16                    view! {
17                        <div class="admin-comment">
18                            <SkeletonBox class="h-4 w-4 rounded"/>
19                            <SkeletonBox class="h-[30px] w-[30px] rounded-full"/>
20                            <div class="admin-comment-body">
21                                <SkeletonBox class="h-3.5 w-40 rounded"/>
22                                <SkeletonBox class="h-4 w-4/5 rounded mt-2.5"/>
23                                <SkeletonBox class="h-3 w-48 rounded mt-3"/>
24                            </div>
25                        </div>
26                    }
27                })
28                .collect_view()}
29        </div>
30    }
31}
32
33/// 评论管理全页骨架屏(AdminLayout 路由级 fallback)。
34#[component]
35pub fn AdminCommentsSkeleton() -> impl IntoView {
36    view! {
37        <div class="admin-comments" aria-hidden="true">
38            <AdminPageHeadSkeleton title_width="w-20" subtitle_width="w-28"/>
39            <div class="admin-toolbar">
40                <SkeletonBox class="h-8 w-80 rounded-full"/>
41            </div>
42            <AdminCommentsListSkeleton/>
43        </div>
44    }
45}