diff --git a/src/components/skeletons/home_skeleton.rs b/src/components/skeletons/home_skeleton.rs index 60f485e..30bc172 100644 --- a/src/components/skeletons/home_skeleton.rs +++ b/src/components/skeletons/home_skeleton.rs @@ -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" } + } + } } } diff --git a/src/pages/home.rs b/src/pages/home.rs index 702568a..754b52f 100644 --- a/src/pages/home.rs +++ b/src/pages/home.rs @@ -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 处理 } } }