From c8e3caa4fc268db5cde823ea3b6f7930b213f98c Mon Sep 17 00:00:00 2001
From: spinline <bilal.karatatr.@gmail.com>
Date: Thu, 12 Feb 2026 21:49:58 +0300
Subject: [PATCH] feat: implement and use standardized Skeleton component

---
 frontend/src/app.rs                    | 35 +++++++++++++-------------
 frontend/src/components/ui/mod.rs      |  1 +
 frontend/src/components/ui/skeleton.rs | 13 ++++++++++
 3 files changed, 32 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/ui/skeleton.rs

diff --git a/frontend/src/app.rs b/frontend/src/app.rs
index 272a09d..f51a095 100644
--- a/frontend/src/app.rs
+++ b/frontend/src/app.rs
@@ -1,4 +1,5 @@
 use crate::components::layout::protected::Protected;
+use crate::components::ui::skeleton::Skeleton;
 use crate::components::torrent::table::TorrentTable;
 use crate::components::auth::login::Login;
 use crate::components::auth::setup::Setup;
@@ -146,33 +147,33 @@ fn InnerApp() -> impl IntoView {
                                 <div class="flex h-screen bg-background">
                                     // Sidebar skeleton
                                     <div class="w-56 border-r border-border p-4 space-y-4">
-                                        <div class="h-8 w-3/4 animate-pulse rounded-md bg-muted" />
+                                        <Skeleton class="h-8 w-3/4" />
                                         <div class="space-y-2">
-                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-6 w-4/5 animate-pulse rounded-md bg-muted" />
-                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-6 w-3/5 animate-pulse rounded-md bg-muted" />
-                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
+                                            <Skeleton class="h-6 w-full" />
+                                            <Skeleton class="h-6 w-full" />
+                                            <Skeleton class="h-6 w-4/5" />
+                                            <Skeleton class="h-6 w-full" />
+                                            <Skeleton class="h-6 w-3/5" />
+                                            <Skeleton class="h-6 w-full" />
                                         </div>
                                     </div>
                                     // Main content skeleton
                                     <div class="flex-1 flex flex-col">
                                         <div class="border-b border-border p-4 flex items-center gap-4">
-                                            <div class="h-8 w-48 animate-pulse rounded-md bg-muted" />
-                                            <div class="h-8 w-64 animate-pulse rounded-md bg-muted" />
-                                            <div class="ml-auto"><div class="h-8 w-24 animate-pulse rounded-md bg-muted" /></div>
+                                            <Skeleton class="h-8 w-48" />
+                                            <Skeleton class="h-8 w-64" />
+                                            <div class="ml-auto"><Skeleton class="h-8 w-24" /></div>
                                         </div>
                                         <div class="flex-1 p-4 space-y-3">
-                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-10 w-3/4 animate-pulse rounded-md bg-muted" />
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-3/4" />
                                         </div>
                                         <div class="border-t border-border p-3">
-                                            <div class="h-5 w-96 animate-pulse rounded-md bg-muted" />
+                                            <Skeleton class="h-5 w-96" />
                                         </div>
                                     </div>
                                 </div>
diff --git a/frontend/src/components/ui/mod.rs b/frontend/src/components/ui/mod.rs
index 7abfe82..90441c1 100644
--- a/frontend/src/components/ui/mod.rs
+++ b/frontend/src/components/ui/mod.rs
@@ -14,6 +14,7 @@ pub mod select;
 pub mod separator;
 pub mod sheet;
 pub mod sidenav;
+pub mod skeleton;
 pub mod svg_icon;
 pub mod table;
 pub mod theme_toggle;
diff --git a/frontend/src/components/ui/skeleton.rs b/frontend/src/components/ui/skeleton.rs
new file mode 100644
index 0000000..75d7f7d
--- /dev/null
+++ b/frontend/src/components/ui/skeleton.rs
@@ -0,0 +1,13 @@
+use leptos::prelude::*;
+use tw_merge::tw_merge;
+
+#[component]
+pub fn Skeleton(
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let class = tw_merge!(
+        "animate-pulse rounded-md bg-muted",
+        class
+    );
+    view! { <div class=class /> }
+}