feat(ui): add shimmer component and integrate into torrent details

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;
   }

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>
     }

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;

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 /> }
+}