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

fix(admin): replace use_delayed_loading with DelayedSkeleton for posts page

Browse Source 
Use the same skeleton pattern as Home/Archives/Search pages.
Skeleton shows immediately (static gray blocks) instead of opacity-0 blank,
eliminating white flash during fast loads.
This commit is contained in:
xfy 2026-06-10 18:15:46 +08:00
parent 265eb15887
commit 9cf6a7e4e6
3 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/skeletons/mod.rs
View File

@ -4,5 +4,6 @@ pub mod delayed_skeleton;
pub mod home_skeleton;
pub mod post_card_skeleton;
pub mod post_detail_skeleton;
pub mod posts_skeleton;
pub mod search_skeleton;
pub mod tags_skeleton;

31
src/components/skeletons/posts_skeleton.rs Normal file
View File

@ -0,0 +1,31 @@
use dioxus::prelude::*;
use crate::components::skeletons::atoms::SkeletonBox;
#[component]
pub fn PostsSkeleton() -> Element {
rsx! {
div { class: "bg-white dark:bg-[#2e2e33] rounded-xl border border-gray-200 dark:border-[#333] overflow-hidden",
table { class: "w-full text-sm",
thead {
tr { class: "border-b border-gray-200 dark:border-[#333]",
th { class: "px-4 py-3", SkeletonBox { class: "h-3 w-10" } }
th { class: "px-4 py-3 w-24", SkeletonBox { class: "h-3 w-10 mx-auto" } }
th { class: "px-4 py-3 w-32", SkeletonBox { class: "h-3 w-10" } }
th { class: "px-4 py-3 w-24", SkeletonBox { class: "h-3 w-10 ml-auto" } }
}
}
tbody {
for _ in 0..10 {
tr { class: "border-b border-gray-100 dark:border-[#333] last:border-0",
td { class: "px-4 py-3", SkeletonBox { class: "h-4 w-1/3" } }
td { class: "px-4 py-3", SkeletonBox { class: "h-5 w-14 mx-auto rounded" } }
td { class: "px-4 py-3", SkeletonBox { class: "h-4 w-20" } }
td { class: "px-4 py-3", SkeletonBox { class: "h-4 w-12 ml-auto" } }
}
}
}
}
}
}
}

13
src/pages/admin/posts.rs
View File

@ -2,7 +2,8 @@ use dioxus::prelude::*;
use dioxus::router::components::Link;
use crate::api::posts::{delete_post, list_posts, CreatePostResponse, PostListResponse};
use crate::hooks::delayed_loading::use_delayed_loading;
use crate::components::skeletons::delayed_skeleton::DelayedSkeleton;
use crate::components::skeletons::posts_skeleton::PostsSkeleton;
use crate::models::post::Post;
use crate::router::Route;
@ -20,7 +21,6 @@ pub fn PostsPage(page: i32) -> Element {
let current_page = page.max(1);
let mut posts_res = use_server_future(move || list_posts(current_page, POSTS_PER_PAGE))?;
let mut deleting = use_signal(|| None::<i32>);
let show_skeleton = use_delayed_loading(move || posts_res.read().is_none());
let posts_data = posts_res.read().as_ref().map(|r| match r {
Ok(PostListResponse { posts, total }) => Ok((posts.clone(), *total)),
@ -102,14 +102,7 @@ pub fn PostsPage(page: i32) -> Element {
}
None => {
rsx! {
div { class: if show_skeleton() { "bg-white dark:bg-[#2e2e33] rounded-xl border border-gray-200 dark:border-[#333] animate-pulse" } else { "bg-white dark:bg-[#2e2e33] rounded-xl border border-gray-200 dark:border-[#333] opacity-0" },
for _ in 0..5 {
div { class: "flex items-center px-4 py-3 border-b border-gray-100 dark:border-[#333] last:border-0",
div { class: "h-4 w-1/3 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
div { class: "ml-auto h-4 w-16 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
}
}
}
DelayedSkeleton { PostsSkeleton {} }
}
}
}