Skip to main content
Yggdrasil

yggdrasil/components/skeletons/
friends_skeleton.rs

1//! 与友链页同尺寸的占位：页头照常显示，名片与交换信息占位。
2
3use leptos::prelude::*;
4
5use crate::components::skeletons::atoms::SkeletonBox;
6use crate::pages::friends::FriendsHeader;
7
8#[component]
9pub fn FriendsSkeleton() -> impl IntoView {
10    view! {
11        <FriendsHeader/>
12        <div role="status" aria-label="正在加载友链">
13            <div class="friends-grid" aria-hidden="true">
14                {(0..4)
15                    .map(|_| {
16                        view! {
17                            <div class="friend-card friend-card-skeleton">
18                                <SkeletonBox class="h-11 w-11 shrink-0 rounded-xl"/>
19                                <div class="flex-1">
20                                    <SkeletonBox class="h-4 w-28"/>
21                                    <SkeletonBox class="h-3 mt-2 w-24"/>
22                                    <SkeletonBox class="h-3 mt-3 w-full"/>
23                                </div>
24                            </div>
25                        }
26                    })
27                    .collect_view()}
28            </div>
29        </div>
30    }
31}