diff --git a/src/components/skeletons/search_skeleton.rs b/src/components/skeletons/search_skeleton.rs index d3a5d25..3ed3515 100644 --- a/src/components/skeletons/search_skeleton.rs +++ b/src/components/skeletons/search_skeleton.rs @@ -1,8 +1,17 @@ use dioxus::prelude::*; +use crate::components::skeletons::post_card_skeleton::PostCardSkeleton; + +/// 搜索页骨架屏 - 搜索结果卡片列表 +/// 模拟 3 个搜索结果卡片(与搜索页现有内联骨架结构一致) #[component] pub fn SearchSkeleton() -> Element { rsx! { - div { class: "animate-pulse", "Loading..." } + div { class: "space-y-6 py-4 animate-pulse", + // 3 个结果卡片骨架 + for _ in 0..3 { + PostCardSkeleton {} + } + } } } diff --git a/src/pages/search.rs b/src/pages/search.rs index 2f68aea..5cea212 100644 --- a/src/pages/search.rs +++ b/src/pages/search.rs @@ -4,7 +4,7 @@ use crate::api::posts::{search_posts, PostListResponse}; use crate::components::nav::use_nav_items; use crate::components::page_layout::PageLayout; use crate::components::post_card::PostCard; -use crate::hooks::delayed_loading::use_delayed_loading; +use crate::components::skeletons::search_skeleton::SearchSkeleton; use crate::router::Route; #[component] @@ -14,8 +14,6 @@ pub fn Search() -> Element { let mut search_res = use_signal(|| None::>); let mut is_searching = use_signal(|| false); let nav_items = use_nav_items(route); - let show_skeleton = use_delayed_loading(move || is_searching()); - let mut on_search = move || { let q = query().trim().to_string(); if q.is_empty() { @@ -55,15 +53,7 @@ pub fn Search() -> Element { } } if is_searching() { - div { class: if show_skeleton() { "space-y-6 py-4 animate-pulse" } else { "space-y-6 py-4 opacity-0" }, - for _ in 0..3 { - div { class: "mb-6 p-6 bg-white dark:bg-[#2e2e33] rounded-lg border border-gray-200 dark:border-[#333]", - div { class: "h-7 w-3/4 bg-gray-200 dark:bg-[#2a2a2a] rounded mb-3" } - div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded mb-2" } - div { class: "h-4 w-2/3 bg-gray-200 dark:bg-[#2a2a2a] rounded" } - } - } - } + SearchSkeleton {} } else if let Some(Ok(PostListResponse { posts })) = search_res() { if posts.is_empty() { div { class: "text-center text-gray-500 dark:text-[#9b9c9d] py-20",