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 dioxus::prelude::*;
|
||||||
|
|
||||||
|
use crate::components::skeletons::post_card_skeleton::PostCardSkeleton;
|
||||||
|
|
||||||
|
/// 首页骨架屏 - 模拟文章卡片列表 + 分页区域
|
||||||
|
/// 显示 5 个文章卡片骨架 + 分页按钮占位
|
||||||
#[component]
|
#[component]
|
||||||
pub fn HomeSkeleton() -> Element {
|
pub fn HomeSkeleton() -> Element {
|
||||||
rsx! {
|
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::nav::use_nav_items;
|
||||||
use crate::components::page_layout::PageLayout;
|
use crate::components::page_layout::PageLayout;
|
||||||
use crate::components::post_card::PostCard;
|
use crate::components::post_card::PostCard;
|
||||||
use crate::components::suspense_wrapper::SuspenseWrapper;
|
use crate::components::skeletons::home_skeleton::HomeSkeleton;
|
||||||
use crate::router::Route;
|
use crate::router::Route;
|
||||||
|
|
||||||
const POSTS_PER_PAGE: i32 = 10;
|
const POSTS_PER_PAGE: i32 = 10;
|
||||||
@ -23,7 +23,8 @@ pub fn HomePage(page: i32) -> Element {
|
|||||||
rsx! {
|
rsx! {
|
||||||
PageLayout { nav_items,
|
PageLayout { nav_items,
|
||||||
HomeInfo {}
|
HomeInfo {}
|
||||||
SuspenseWrapper {
|
SuspenseBoundary {
|
||||||
|
fallback: |_| rsx! { HomeSkeleton {} },
|
||||||
HomePosts { current_page }
|
HomePosts { current_page }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -62,9 +63,7 @@ fn HomePosts(current_page: i32) -> Element {
|
|||||||
}
|
}
|
||||||
_ => {
|
_ => {
|
||||||
rsx! {
|
rsx! {
|
||||||
div { class: "text-center text-gray-500 dark:text-[#9b9c9d] py-20",
|
// 骨架屏由 SuspenseBoundary fallback 处理
|
||||||
"加载中..."
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user