feat: add HomeSkeleton and replace generic fallback on home page
This commit is contained in:
parent
db8e88e1fe
commit
076448d6ed
@ -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" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 处理
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user