feat: add loading indicator

rust-dd · Nov 5, 2024 · 4e41a08 · 4e41a08
1 parent e7d63f1
commit 4e41a08
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 2 deletions.
diff --git a/public/rust_color.png b/public/rust_color.png
diff --git 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! {
         <Title text="Tech Diaries - The Official Rust-DD Developer Blog" />
-        <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
@@ -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
@@ -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
@@ -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();