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

feat: wrap all skeleton screens with DelayedSkeleton to prevent flicker

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/archives.rs
View File

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

3
src/pages/home.rs
View File

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

3
src/pages/post_detail.rs
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_footer::PostFooter;
use crate::components::post::post_header::PostHeader; use crate::components::post::post_header::PostHeader;
use crate::components::post::post_toc::PostToc; use crate::components::post::post_toc::PostToc;
use crate::components::skeletons::delayed_skeleton::DelayedSkeleton;
use crate::components::skeletons::post_detail_skeleton::PostDetailSkeleton; use crate::components::skeletons::post_detail_skeleton::PostDetailSkeleton;
use crate::router::Route; use crate::router::Route;
@ -19,7 +20,7 @@ pub fn PostDetail(slug: String) -> Element {
rsx! { rsx! {
PageLayout { nav_items, PageLayout { nav_items,
SuspenseBoundary { SuspenseBoundary {
fallback: |_| rsx! { PostDetailSkeleton {} }, fallback: |_| rsx! { DelayedSkeleton { PostDetailSkeleton {} } },
PostDetailContent { slug: slug.clone() } PostDetailContent { slug: slug.clone() }
} }
} }

3
src/pages/search.rs
View File

@ -4,6 +4,7 @@ use crate::api::posts::{search_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::skeletons::delayed_skeleton::DelayedSkeleton;
use crate::components::skeletons::search_skeleton::SearchSkeleton; use crate::components::skeletons::search_skeleton::SearchSkeleton;
use crate::router::Route; use crate::router::Route;
@ -53,7 +54,7 @@ pub fn Search() -> Element {
} }
} }
if is_searching() { if is_searching() {
SearchSkeleton {} DelayedSkeleton { SearchSkeleton {} }
} else if let Some(Ok(PostListResponse { posts })) = search_res() { } else if let Some(Ok(PostListResponse { posts })) = search_res() {
if posts.is_empty() { if posts.is_empty() {
div { class: "text-center text-gray-500 dark:text-[#9b9c9d] py-20", div { class: "text-center text-gray-500 dark:text-[#9b9c9d] py-20",

5
src/pages/tags.rs
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::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::skeletons::delayed_skeleton::DelayedSkeleton;
use crate::components::skeletons::tags_skeleton::{TagsSkeleton, TagDetailSkeleton}; use crate::components::skeletons::tags_skeleton::{TagsSkeleton, TagDetailSkeleton};
use crate::router::Route; use crate::router::Route;
@ -20,7 +21,7 @@ pub fn Tags() -> Element {
} }
} }
SuspenseBoundary { SuspenseBoundary {
fallback: |_| rsx! { TagsSkeleton {} }, fallback: |_| rsx! { DelayedSkeleton { TagsSkeleton {} } },
TagsContent {} TagsContent {}
} }
} }
@ -93,7 +94,7 @@ pub fn TagDetail(tag: String) -> Element {
} }
} }
SuspenseBoundary { SuspenseBoundary {
fallback: |_| rsx! { TagDetailSkeleton {} }, fallback: |_| rsx! { DelayedSkeleton { TagDetailSkeleton {} } },
TagDetailContent { tag: tag.clone() } TagDetailContent { tag: tag.clone() }
} }
} }