Skip to main content

yggdrasil/components/skeletons/
home_skeleton.rs

1//! 首页骨架屏
2//!
3//! 模拟首页文章卡片列表与分页区域。
4
5use dioxus::prelude::*;
6
7use crate::components::skeletons::atoms::SkeletonBox;
8use crate::components::skeletons::post_card_skeleton::PostCardSkeleton;
9
10/// 首页骨架屏组件。
11///
12/// 显示与 `POSTS_PER_PAGE` 等量的文章卡片骨架与分页按钮占位，
13/// 使骨架屏与加载完成后的实际列表长度一致，避免内容跳变。
14#[component]
15pub fn HomeSkeleton() -> Element {
16    rsx! {
17        div {
18            // 10 个文章卡片骨架，对齐首页 POSTS_PER_PAGE。
19            for _ in 0..10 {
20                PostCardSkeleton {}
21            }
22            // 分页按钮占位
23            div { class: "flex mt-10 mb-6 justify-between",
24                SkeletonBox { class: "h-9 w-24 rounded-full" }
25                SkeletonBox { class: "h-9 w-24 rounded-full" }
26            }
27        }
28    }
29}