yggdrasil/components/skeletons/
home_skeleton.rs

1//! 首页骨架屏：静态开场与真实页面一致，文章区单独加载。
2
3use dioxus::prelude::*;
4
5use crate::components::skeletons::atoms::SkeletonBox;
6use crate::components::skeletons::post_card_skeleton::PostCardSkeleton;
7use crate::pages::home::HomeIntro;
8
9#[component]
10pub fn HomeSkeleton(#[props(default = 1)] current_page: i32) -> Element {
11    rsx! {
12        div { class: "home-page", aria_hidden: "true", inert: true,
13            HomeIntro { current_page }
14            HomePostsSkeleton { current_page }
15        }
16    }
17}
18
19#[component]
20pub fn HomePostsSkeleton(current_page: i32) -> Element {
21    rsx! {
22        div { aria_hidden: "true",
23            div { class: "home-section-heading",
24                SkeletonBox { class: "h-7 w-40" }
25                SkeletonBox { class: "h-4 w-20" }
26            }
27            for i in 0..10 {
28                div { key: "{i}", class: if current_page == 1 && i == 0 { "home-entry home-entry-featured" } else { "home-entry" },
29                    if current_page == 1 && i == 0 {
30                        div { class: "home-featured-label", SkeletonBox { class: "h-3 w-36" } }
31                    } else {
32                        span { class: "home-entry-number", SkeletonBox { class: "h-3 w-4" } }
33                    }
34                    PostCardSkeleton { compact: true }
35                }
36            }
37            div { class: "flex mt-10 mb-6 justify-between",
38                SkeletonBox { class: "h-10 w-24 rounded-full" }
39                SkeletonBox { class: "h-10 w-24 rounded-full" }
40            }
41        }
42    }
43}
yggdrasil/components/skeletons/home_skeleton.rs

yggdrasil/components/skeletons/
home_skeleton.rs
