feat: add HomeSkeleton and replace generic fallback on home page

This commit is contained in:
xfy 2026-06-03 17:09:20 +08:00
parent db8e88e1fe
commit 076448d6ed
2 changed files with 19 additions and 6 deletions

View File

@ -1,8 +1,22 @@
use dioxus::prelude::*;
use crate::components::skeletons::post_card_skeleton::PostCardSkeleton;
/// 首页骨架屏 - 模拟文章卡片列表 + 分页区域
/// 显示 5 个文章卡片骨架 + 分页按钮占位
#[component]
pub fn HomeSkeleton() -> Element {
rsx! {
div { class: "animate-pulse", "Loading..." }
div { class: "animate-pulse",
// 5 个文章卡片骨架
for _ in 0..5 {
PostCardSkeleton {}
}
// 分页按钮占位
div { class: "flex mt-10 mb-6 justify-between",
div { class: "h-9 w-24 bg-gray-200 dark:bg-[#2a2a2a] rounded-full" }
div { class: "h-9 w-24 bg-gray-200 dark:bg-[#2a2a2a] rounded-full" }
}
}
}
}

View File

@ -4,7 +4,7 @@ use crate::api::posts::{list_published_posts, PostListResponse};
use crate::components::nav::use_nav_items;
use crate::components::page_layout::PageLayout;
use crate::components::post_card::PostCard;
use crate::components::suspense_wrapper::SuspenseWrapper;
use crate::components::skeletons::home_skeleton::HomeSkeleton;
use crate::router::Route;
const POSTS_PER_PAGE: i32 = 10;
@ -23,7 +23,8 @@ pub fn HomePage(page: i32) -> Element {
rsx! {
PageLayout { nav_items,
HomeInfo {}
SuspenseWrapper {
SuspenseBoundary {
fallback: |_| rsx! { HomeSkeleton {} },
HomePosts { current_page }
}
}
@ -62,9 +63,7 @@ fn HomePosts(current_page: i32) -> Element {
}
_ => {
rsx! {
div { class: "text-center text-gray-500 dark:text-[#9b9c9d] py-20",
"加载中..."
}
// 骨架屏由 SuspenseBoundary fallback 处理
}
}
}