yggdrasil/components/skeletons/
friends_admin_skeleton.rs

1//! 后台友链管理骨架屏
2//!
3//! 与友链页同一版式：标题行、左侧友链列表、右侧表单。
4
5use leptos::prelude::*;
6
7use crate::components::skeletons::atoms::{AdminPageHeadSkeleton, SkeletonBox};
8
9/// 友链列表骨架（列表加载中使用）。
10#[component]
11pub fn FriendsAdminListSkeleton() -> impl IntoView {
12    view! {
13        <ol class="admin-panel admin-friends-list" aria-hidden="true">
14            {(0..5)
15                .map(|_| {
16                    view! {
17                        <li class="admin-friend">
18                            <SkeletonBox class="h-4 w-3 rounded"/>
19                            <SkeletonBox class="h-[34px] w-[34px] rounded-[10px]"/>
20                            <div class="admin-friend-text">
21                                <SkeletonBox class="h-4 w-32 rounded"/>
22                                <SkeletonBox class="h-3 w-40 rounded mt-1.5"/>
23                            </div>
24                            <SkeletonBox class="h-3 w-6 rounded"/>
25                        </li>
26                    }
27                })
28                .collect_view()}
29        </ol>
30    }
31}
32
33/// 友链管理全页骨架屏（AdminLayout 路由级 fallback）。
34#[component]
35pub fn FriendsAdminSkeleton() -> impl IntoView {
36    view! {
37        <div class="admin-friends" aria-hidden="true">
38            <AdminPageHeadSkeleton
39                title_width="w-16"
40                subtitle_width="w-80"
41                actions=|| view! { <SkeletonBox class="h-[34px] w-28 rounded-lg"/> }
42            />
43            <div class="admin-friends-grid">
44                <div class="admin-friends-list-col">
45                    <FriendsAdminListSkeleton/>
46                </div>
47                <div class="admin-friend-form">
48                    <SkeletonBox class="h-5 w-20 rounded"/>
49                    <SkeletonBox class="h-9 w-full rounded-lg"/>
50                    <SkeletonBox class="h-9 w-full rounded-lg"/>
51                    <SkeletonBox class="h-20 w-full rounded-lg"/>
52                </div>
53            </div>
54        </div>
55    }
56}
yggdrasil/components/skeletons/friends_admin_skeleton.rs

yggdrasil/components/skeletons/
friends_admin_skeleton.rs
