yggdrasil/components/skeletons/
changelog_skeleton.rs

1//! 更新日志页骨架屏：页头照常显示，版本目录与版本分节占位。
2
3use crate::components::skeletons::atoms::SkeletonBox;
4use crate::pages::changelog::ChangelogHeader;
5use leptos::prelude::*;
6
7/// 更新日志加载占位：镜像有界版本目录和小屏横向版本条。
8#[component]
9pub fn ChangelogSkeleton() -> impl IntoView {
10    view! {
11        <div class="changelog">
12            <ChangelogHeader/>
13            <div class="changelog-layout" role="status" aria-label="正在加载更新日志">
14                <div class="changelog-nav" aria-hidden="true">
15                    <div class="changelog-nav-panel">
16                        <div class="changelog-nav-head">
17                            <SkeletonBox class="h-3 w-8"/>
18                        </div>
19                        <div class="changelog-nav-scroll">
20                            <div class="changelog-nav-items">
21                                {(0..6)
22                                    .map(|_| {
23                                        view! {
24                                            <div class="changelog-nav-link">
25                                                <SkeletonBox class="h-3 w-12"/>
26                                                <SkeletonBox class="h-3 w-8"/>
27                                            </div>
28                                        }
29                                    })
30                                    .collect_view()}
31                            </div>
32                        </div>
33                    </div>
34                </div>
35                <div class="changelog-releases" aria-hidden="true">
36                    {(0..2)
37                        .map(|_| {
38                            view! {
39                                <div class="changelog-version">
40                                    <SkeletonBox class="h-6 w-24"/>
41                                    {(0..2)
42                                        .map(|_| {
43                                            view! {
44                                                <div class="changelog-group">
45                                                    <SkeletonBox class="h-5 w-12 rounded-full"/>
46                                                    <div class="flex flex-col gap-3 mt-4">
47                                                        <SkeletonBox class="h-3.5 w-full"/>
48                                                        <SkeletonBox class="h-3.5 w-5/6"/>
49                                                        <SkeletonBox class="h-3.5 w-3/4"/>
50                                                    </div>
51                                                </div>
52                                            }
53                                        })
54                                        .collect_view()}
55                                </div>
56                            }
57                        })
58                        .collect_view()}
59                </div>
60            </div>
61        </div>
62    }
63}
yggdrasil/components/skeletons/changelog_skeleton.rs

yggdrasil/components/skeletons/
changelog_skeleton.rs
