yggdrasil/components/skeletons/
profile_skeleton.rs

1//! 后台个人资料骨架屏
2//!
3//! 与个人资料页同一版式：个人信息、修改密码两个分区与退出登录行。
4
5use leptos::prelude::*;
6
7use crate::components::skeletons::atoms::SkeletonBox;
8
9/// 后台个人资料骨架屏组件。
10#[component]
11pub fn ProfileSkeleton() -> impl IntoView {
12    view! {
13        <div class="admin-profile-skeleton" aria-hidden="true">
14            {[4, 3]
15                .into_iter()
16                .map(|rows| {
17                    view! {
18                        <div class="admin-panel admin-profile-section">
19                            <div class="admin-profile-section-head">
20                                <SkeletonBox class="h-4 w-20 rounded"/>
21                                <SkeletonBox class="h-3 w-64 rounded mt-2"/>
22                            </div>
23                            <div class="admin-profile-rows">
24                                {(0..rows)
25                                    .map(|_| {
26                                        view! {
27                                            <div class="admin-profile-row">
28                                                <SkeletonBox class="h-3.5 w-16 rounded"/>
29                                                <SkeletonBox class="h-9 w-full rounded-lg"/>
30                                            </div>
31                                        }
32                                    })
33                                    .collect_view()}
34                            </div>
35                        </div>
36                    }
37                })
38                .collect_view()}
39        </div>
40    }
41}
yggdrasil/components/skeletons/profile_skeleton.rs

yggdrasil/components/skeletons/
profile_skeleton.rs
