feat: implement contextual skeletons for login and dashboard

frontend/src/app.rs

@@ -1,12 +1,13 @@
 use crate::components::layout::protected::Protected;
 use crate::components::ui::skeleton::Skeleton;
+use crate::components::ui::card::{Card, CardHeader, CardContent};
 use crate::components::torrent::table::TorrentTable;
 use crate::components::auth::login::Login;
 use crate::components::auth::setup::Setup;
 use leptos::prelude::*;
 use leptos::task::spawn_local;
 use leptos_router::components::{Router, Routes, Route};
-use leptos_router::hooks::use_navigate;
+use leptos_router::hooks::{use_navigate, use_location};
 use crate::components::ui::toast::Toaster;
 use crate::components::hooks::use_theme_mode::ThemeMode;
 
@@ -31,7 +32,9 @@ pub fn App() -> impl IntoView {
 
     view! {
         <Toaster />
+        <Router>
             <InnerApp />
+        </Router>
     }
 }
 
@@ -39,6 +42,7 @@ pub fn App() -> impl IntoView {
 fn InnerApp() -> impl IntoView {
     crate::store::provide_torrent_store();
     let store = use_context::<crate::store::TorrentStore>();
+    let loc = use_location();
 
     let is_loading = signal(true);
     let is_authenticated = signal(false);
@@ -98,7 +102,6 @@ fn InnerApp() -> impl IntoView {
 
     view! {
         <div class="relative w-full h-screen" style="height: 100dvh;">
-            <Router>
             <Routes fallback=|| view! { <div class="p-4">"404 Not Found"</div> }>
                 <Route path=leptos_router::path!("/login") view=move || {
                     let authenticated = is_authenticated.0.get();
@@ -143,7 +146,35 @@ fn InnerApp() -> impl IntoView {
                     });
                     
                     view! {
-                            <Show when=move || !is_loading.0.get() fallback=|| view! {
+                        <Show when=move || !is_loading.0.get() fallback=move || {
+                            let path = loc.pathname.get();
+                            if path == "/login" {
+                                // Login Skeleton
+                                view! {
+                                    <div class="flex items-center justify-center min-h-screen bg-muted/40 px-4">
+                                        <Card class="w-full max-w-sm shadow-lg border-none">
+                                            <CardHeader class="pb-2 items-center space-y-4">
+                                                <Skeleton class="w-12 h-12 rounded-xl" />
+                                                <Skeleton class="h-8 w-32" />
+                                                <Skeleton class="h-4 w-48" />
+                                            </CardHeader>
+                                            <CardContent class="pt-4 space-y-6">
+                                                <div class="space-y-2">
+                                                    <Skeleton class="h-4 w-24" />
+                                                    <Skeleton class="h-10 w-full" />
+                                                </div>
+                                                <div class="space-y-2">
+                                                    <Skeleton class="h-4 w-24" />
+                                                    <Skeleton class="h-10 w-full" />
+                                                </div>
+                                                <Skeleton class="h-10 w-full rounded-md mt-4" />
+                                            </CardContent>
+                                        </Card>
+                                    </div>
+                                }.into_any()
+                            } else {
+                                // Dashboard Skeleton
+                                view! {
                                     <div class="flex h-screen bg-background">
                                         // Sidebar skeleton
                                         <div class="w-56 border-r border-border p-4 space-y-4">
@@ -177,7 +208,9 @@ fn InnerApp() -> impl IntoView {
                                             </div>
                                         </div>
                                     </div>
-                            }.into_any()>
+                                }.into_any()
+                            }
+                        }>
                             <Show when=move || is_authenticated.0.get() fallback=|| ()>
                                 <Protected>
                                     <div class="flex flex-col h-full overflow-hidden">
@@ -191,6 +224,29 @@ fn InnerApp() -> impl IntoView {
                     }.into_any()
                 }/>
 
+                <Route path=leptos_router::path!("/settings") view=move || {
+                    Effect::new(move |_| {
+                        if !is_authenticated.0.get() {
+                            let navigate = use_navigate();
+                            navigate("/login", Default::default());
+                        }
+                    });
+                    
+                    view! {
+                        <Show when=move || !is_loading.0.get() fallback=|| ()>
+                            <Show when=move || is_authenticated.0.get() fallback=|| ()>
+                                <Protected>
+                                    <div class="p-4">"Settings Page (Coming Soon)"</div>
+                                </Protected>
+                            </Show>
+                        </Show>
+                    }
+                }/>
+            </Routes>
+        </div>
+    }
+}
+
                     <Route path=leptos_router::path!("/settings") view=move || {
                         Effect::new(move |_| {
                             if !is_authenticated.0.get() {