diff --git a/public/rust_color.png b/public/rust_color.png new file mode 100644 index 0000000..598f212 Binary files /dev/null and b/public/rust_color.png differ diff --git a/src/home.rs b/src/home.rs index 76ce3a6..77135b5 100644 --- a/src/home.rs +++ b/src/home.rs @@ -2,6 +2,7 @@ use leptos::*; use leptos_meta::Title; use crate::api::{select_posts, select_tags}; +use crate::loader; #[component] pub fn Component() -> impl IntoView { @@ -17,7 +18,7 @@ pub fn Component() -> impl IntoView { view! { - <Suspense fallback=|| ()> + <Suspense fallback=|| view! { <loader::Component /> }> <div class="flex flex-row flex-wrap gap-1 px-4 text-xs"> <button on:click=move |_| selected_tags.update(|prev| prev.clear()) diff --git a/src/lib.rs b/src/lib.rs index bfc11ab..09af0a1 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -6,6 +6,7 @@ pub mod error_template; #[cfg(feature = "ssr")] pub mod fileserv; pub mod home; +pub mod loader; pub mod post; #[cfg(feature = "ssr")] pub mod redirect; diff --git a/src/loader.rs b/src/loader.rs new file mode 100644 index 0000000..e179747 --- /dev/null +++ b/src/loader.rs @@ -0,0 +1,11 @@ +use leptos::*; + +#[component] +pub fn Component() -> impl IntoView { + view! { + <div class="flex absolute inset-0 flex-col gap-1 justify-center items-center m-auto"> + <img src="/rust_color.png" width=32 height=32 class="animate-spin" /> + <p class="text-sm italic text-muted-foreground">Loading...</p> + </div> + } +} diff --git a/src/post.rs b/src/post.rs index 8e727a4..77ca99b 100644 --- a/src/post.rs +++ b/src/post.rs @@ -3,6 +3,7 @@ use leptos_meta::*; use leptos_router::*; use crate::api::{increment_views, select_post}; +use crate::loader; #[component] pub fn Component() -> impl IntoView { @@ -26,7 +27,9 @@ pub fn Component() -> impl IntoView { }); view! { - <Suspense fallback=|| ()> + <Suspense fallback=|| { + view! { <loader::Component /> } + }> {move || { post.with(|post| { let post = post.clone().unwrap_or_default();