xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add SearchSkeleton component and replace inline skeleton on search page

Browse Source
This commit is contained in:
xfy 2026-06-03 17:30:47 +08:00
parent c2e1fbe3ac
commit 62519d620d
2 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/skeletons/search_skeleton.rs
View File

@ -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 {}
}
}
}
}

14
src/pages/search.rs
View File

@ -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::<Result<PostListResponse, ServerFnError>>);
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",