yggdrasil/components/skeletons/
changelog_skeleton.rs

1//! 更新日志页骨架屏。
2//!
3//! 镜像更新日志的页头、统计栏和版本双栏布局，避免加载时出现文章封面占位。
4//! 动画由外层 DelayedSkeleton 统一提供。
5
6use crate::components::skeletons::atoms::{SkeletonBox, SkeletonCard};
7use dioxus::prelude::*;
8
9/// 更新日志加载占位：桌面端版本导航 + 版本卡片，小屏隐藏导航。
10#[component]
11pub fn ChangelogSkeleton() -> Element {
12    rsx! {
13        div { aria_hidden: "true",
14            div { class: "page-header mb-6",
15                SkeletonBox { class: "h-10 w-36 rounded", animate: false }
16            }
17
18            div { class: "flex flex-wrap items-center gap-x-4 gap-y-1 mb-8",
19                SkeletonBox { class: "h-5 w-36 rounded", animate: false }
20                SkeletonBox { class: "h-5 w-24 rounded", animate: false }
21            }
22
23            div { class: "flex gap-8",
24                div { class: "hidden lg:block w-40 shrink-0",
25                    div { class: "sticky top-20",
26                        for i in 0..6 {
27                            div { key: "{i}", class: "flex items-center gap-2 py-1.5",
28                                SkeletonBox { class: "w-1.5 h-1.5 rounded-full shrink-0", animate: false }
29                                SkeletonBox { class: "h-5 w-16 rounded", animate: false }
30                            }
31                        }
32                    }
33                }
34
35                div { class: "flex-1 min-w-0 space-y-6",
36                    for i in 0..2 {
37                        SkeletonCard { key: "{i}", class: Some("rounded-[2rem] p-6 md:p-8"),
38                            div { class: "flex items-baseline gap-3",
39                                SkeletonBox { class: "h-7 md:h-8 w-24 rounded", animate: false }
40                                SkeletonBox { class: "h-4 w-20 rounded ml-auto", animate: false }
41                            }
42
43                            div { class: "mt-4 space-y-5",
44                                for group in 0..2 {
45                                    div { key: "{group}",
46                                        SkeletonBox { class: "h-5 w-12 rounded-full mb-2", animate: false }
47                                        div { class: "space-y-2 pl-4",
48                                            SkeletonBox { class: "h-4 w-full rounded", animate: false }
49                                            SkeletonBox { class: "h-4 w-5/6 rounded", animate: false }
50                                            SkeletonBox { class: "h-4 w-3/4 rounded", animate: false }
51                                        }
52                                    }
53                                }
54                            }
55                        }
56                    }
57                }
58            }
59        }
60    }
61}
yggdrasil/components/skeletons/changelog_skeleton.rs

yggdrasil/components/skeletons/
changelog_skeleton.rs
