feat: wrap all skeleton screens with DelayedSkeleton to prevent flicker
This commit is contained in:
parent
73e30d6f89
commit
754c1f5b86
@ -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 {}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 }
|
||||
}
|
||||
}
|
||||
|
||||
@ -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() }
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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() }
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user