From ec23285a6a65de9aea841037d9da99c3d2289f31 Mon Sep 17 00:00:00 2001
From: spinline <bilal.karatatr.@gmail.com>
Date: Fri, 20 Feb 2026 23:53:37 +0300
Subject: [PATCH] feat(ui): add shimmer component and integrate into torrent
 details

---
 frontend/input.css                         | 12 ++++++++++--
 frontend/src/components/torrent/details.rs | 12 ++++++------
 frontend/src/components/ui/mod.rs          |  1 +
 frontend/src/components/ui/shimmer.rs      | 13 +++++++++++++
 4 files changed, 30 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/ui/shimmer.rs

diff --git a/frontend/input.css b/frontend/input.css
index 5e1e67e..5a50a54 100644
--- a/frontend/input.css
+++ b/frontend/input.css
@@ -45,8 +45,15 @@
   --ring: oklch(0.556 0 0);
 }
 
-
 @theme inline {
+  --animate-shimmer: shimmer 2s infinite;
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -76,6 +83,7 @@
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
   }
@@ -88,4 +96,4 @@
   dialog {
     margin: auto;
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/torrent/details.rs b/frontend/src/components/torrent/details.rs
index d62cbc5..2c49c04 100644
--- a/frontend/src/components/torrent/details.rs
+++ b/frontend/src/components/torrent/details.rs
@@ -135,17 +135,17 @@ fn DetailsShimmer() -> impl IntoView {
         <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
             {(0..8).map(|_| view! {
                 <div class="flex flex-col gap-2">
-                    <Skeleton class="h-3 w-16" />
-                    <Skeleton class="h-5 w-24" />
+                    <crate::components::ui::shimmer::Shimmer class="h-3 w-16" />
+                    <crate::components::ui::shimmer::Shimmer class="h-5 w-24" />
                 </div>
             }).collect_view()}
             <div class="col-span-2 md:col-span-4 flex flex-col gap-2">
-                <Skeleton class="h-3 w-20" />
-                <Skeleton class="h-5 w-full max-w-md" />
+                <crate::components::ui::shimmer::Shimmer class="h-3 w-20" />
+                <crate::components::ui::shimmer::Shimmer class="h-5 w-full max-w-md" />
             </div>
             <div class="col-span-2 md:col-span-4 flex flex-col gap-2">
-                <Skeleton class="h-3 w-12" />
-                <Skeleton class="h-5 w-full max-w-sm" />
+                <crate::components::ui::shimmer::Shimmer class="h-3 w-12" />
+                <crate::components::ui::shimmer::Shimmer class="h-5 w-full max-w-sm" />
             </div>
         </div>
     }
diff --git a/frontend/src/components/ui/mod.rs b/frontend/src/components/ui/mod.rs
index 4ea3efe..ae34a73 100644
--- a/frontend/src/components/ui/mod.rs
+++ b/frontend/src/components/ui/mod.rs
@@ -17,6 +17,7 @@ pub mod separator;
 pub mod sheet;
 pub mod sidenav;
 pub mod skeleton;
+pub mod shimmer;
 pub mod svg_icon;
 pub mod switch;
 pub mod table;
diff --git a/frontend/src/components/ui/shimmer.rs b/frontend/src/components/ui/shimmer.rs
new file mode 100644
index 0000000..a2d4af7
--- /dev/null
+++ b/frontend/src/components/ui/shimmer.rs
@@ -0,0 +1,13 @@
+use leptos::prelude::*;
+use tw_merge::tw_merge;
+
+#[component]
+pub fn Shimmer(
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let merged_class = tw_merge!(
+        "relative overflow-hidden bg-muted before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent dark:before:via-white/5",
+        class
+    );
+    view! { <div class=merged_class /> }
+}