Skip to main content
Yggdrasil

yggdrasil/components/skeletons/
search_skeleton.rs

1//! 与搜索结果行对齐的骨架屏，也用于搜索路由的加载占位。
2
3use leptos::prelude::*;
4
5use crate::components::skeletons::atoms::SkeletonBox;
6
7/// 结果标题的宽度，错落排布更像真实结果。
8const TITLE_WIDTHS: [&str; 4] = ["width: 62%", "width: 78%", "width: 54%", "width: 70%"];
9
10#[component]
11pub fn SearchSkeleton() -> impl IntoView {
12    view! {
13        <div class="search-skeleton" role="status" aria-label="正在搜索">
14            <div aria-hidden="true">
15                <SkeletonBox class="h-4 w-36 mb-4"/>
16                {TITLE_WIDTHS
17                    .iter()
18                    .map(|width| {
19                        view! {
20                            <div class="search-result search-result-skeleton">
21                                <SkeletonBox class="h-4" style=*width/>
22                                <SkeletonBox class="h-3 mt-3 w-full"/>
23                                <SkeletonBox class="h-3 mt-2 w-4/5"/>
24                                <SkeletonBox class="h-3 mt-3 w-40"/>
25                            </div>
26                        }
27                    })
28                    .collect_view()}
29            </div>
30        </div>
31    }
32}