feat: wrap all skeleton screens with DelayedSkeleton to prevent flicker

This commit is contained in:
xfy 2026-06-03 17:43:34 +08:00
parent 73e30d6f89
commit 754c1f5b86
5 changed files with 11 additions and 6 deletions

View File

@ -3,6 +3,7 @@ use dioxus::prelude::*;
use crate::api::posts::{list_published_posts, PostListResponse};
use crate::components::nav::use_nav_items;
use crate::components::page_layout::PageLayout;
use crate::components::skeletons::delayed_skeleton::DelayedSkeleton;
use crate::components::skeletons::archive_skeleton::ArchiveSkeleton;
use crate::models::post::Post;
use crate::router::Route;
@ -90,7 +91,7 @@ pub fn Archives() -> Element {
}
}
SuspenseBoundary {
fallback: |_| rsx! { ArchiveSkeleton {} },
fallback: |_| rsx! { DelayedSkeleton { ArchiveSkeleton {} } },
ArchivesContent {}
}
}

View File

@ -4,6 +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::skeletons::delayed_skeleton::DelayedSkeleton;
use crate::components::skeletons::home_skeleton::HomeSkeleton;
use crate::router::Route;
@ -24,7 +25,7 @@ pub fn HomePage(page: i32) -> Element {
PageLayout { nav_items,
HomeInfo {}
SuspenseBoundary {
fallback: |_| rsx! { HomeSkeleton {} },
fallback: |_| rsx! { DelayedSkeleton { HomeSkeleton {} } },
HomePosts { current_page }
}
}

View File

@ -8,6 +8,7 @@ use crate::components::post::post_cover::PostCover;
use crate::components::post::post_footer::PostFooter;
use crate::components::post::post_header::PostHeader;
use crate::components::post::post_toc::PostToc;
use crate::components::skeletons::delayed_skeleton::DelayedSkeleton;
use crate::components::skeletons::post_detail_skeleton::PostDetailSkeleton;
use crate::router::Route;
@ -19,7 +20,7 @@ pub fn PostDetail(slug: String) -> Element {
rsx! {
PageLayout { nav_items,
SuspenseBoundary {
fallback: |_| rsx! { PostDetailSkeleton {} },
fallback: |_| rsx! { DelayedSkeleton { PostDetailSkeleton {} } },
PostDetailContent { slug: slug.clone() }
}
}

View File

@ -4,6 +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::components::skeletons::delayed_skeleton::DelayedSkeleton;
use crate::components::skeletons::search_skeleton::SearchSkeleton;
use crate::router::Route;
@ -53,7 +54,7 @@ pub fn Search() -> Element {
}
}
if is_searching() {
SearchSkeleton {}
DelayedSkeleton { 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",

View File

@ -4,6 +4,7 @@ use crate::api::posts::{get_posts_by_tag, list_tags, PostListResponse, TagListRe
use crate::components::nav::use_nav_items;
use crate::components::page_layout::PageLayout;
use crate::components::post_card::PostCard;
use crate::components::skeletons::delayed_skeleton::DelayedSkeleton;
use crate::components::skeletons::tags_skeleton::{TagsSkeleton, TagDetailSkeleton};
use crate::router::Route;
@ -20,7 +21,7 @@ pub fn Tags() -> Element {
}
}
SuspenseBoundary {
fallback: |_| rsx! { TagsSkeleton {} },
fallback: |_| rsx! { DelayedSkeleton { TagsSkeleton {} } },
TagsContent {}
}
}
@ -93,7 +94,7 @@ pub fn TagDetail(tag: String) -> Element {
}
}
SuspenseBoundary {
fallback: |_| rsx! { TagDetailSkeleton {} },
fallback: |_| rsx! { DelayedSkeleton { TagDetailSkeleton {} } },
TagDetailContent { tag: tag.clone() }
}
}