admin/vibetorrent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 194 Wiki Activity

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

Browse Source
This commit is contained in:
spinline
2026-02-20 23:53:37 +03:00
parent f075a87668
commit ec23285a6a
4 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/input.css
View File

@@ -45,8 +45,15 @@
--ring: oklch(0.556 0 0); --ring: oklch(0.556 0 0);
} }
@theme inline { @theme inline {
--animate-shimmer: shimmer 2s infinite;
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--color-card: var(--card); --color-card: var(--card);
@@ -76,6 +83,7 @@
* { * {
@apply border-border outline-ring/50; @apply border-border outline-ring/50;
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
@@ -88,4 +96,4 @@
dialog { dialog {
margin: auto; margin: auto;
} }
} }

12
frontend/src/components/torrent/details.rs
View File

@@ -135,17 +135,17 @@ fn DetailsShimmer() -> impl IntoView {
<div class="grid grid-cols-2 md:grid-cols-4 gap-6"> <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
{(0..8).map(|_| view! { {(0..8).map(|_| view! {
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<Skeleton class="h-3 w-16" /> <crate::components::ui::shimmer::Shimmer class="h-3 w-16" />
<Skeleton class="h-5 w-24" /> <crate::components::ui::shimmer::Shimmer class="h-5 w-24" />
</div> </div>
}).collect_view()} }).collect_view()}
<div class="col-span-2 md:col-span-4 flex flex-col gap-2"> <div class="col-span-2 md:col-span-4 flex flex-col gap-2">
<Skeleton class="h-3 w-20" /> <crate::components::ui::shimmer::Shimmer class="h-3 w-20" />
<Skeleton class="h-5 w-full max-w-md" /> <crate::components::ui::shimmer::Shimmer class="h-5 w-full max-w-md" />
</div> </div>
<div class="col-span-2 md:col-span-4 flex flex-col gap-2"> <div class="col-span-2 md:col-span-4 flex flex-col gap-2">
<Skeleton class="h-3 w-12" /> <crate::components::ui::shimmer::Shimmer class="h-3 w-12" />
<Skeleton class="h-5 w-full max-w-sm" /> <crate::components::ui::shimmer::Shimmer class="h-5 w-full max-w-sm" />
</div> </div>
</div> </div>
} }

1
frontend/src/components/ui/mod.rs
View File

@@ -17,6 +17,7 @@ pub mod separator;
pub mod sheet; pub mod sheet;
pub mod sidenav; pub mod sidenav;
pub mod skeleton; pub mod skeleton;
pub mod shimmer;
pub mod svg_icon; pub mod svg_icon;
pub mod switch; pub mod switch;
pub mod table; pub mod table;

13
frontend/src/components/ui/shimmer.rs Normal file
View File

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