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

feat: implement and use standardized Skeleton component
Some checks failed
Build MIPS Binary / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
spinline
2026-02-12 21:49:58 +03:00
parent 98555f16ca
commit c8e3caa4fc
3 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/app.rs
View File

@@ -1,4 +1,5 @@
use crate::components::layout::protected::Protected; use crate::components::layout::protected::Protected;
use crate::components::ui::skeleton::Skeleton;
use crate::components::torrent::table::TorrentTable; use crate::components::torrent::table::TorrentTable;
use crate::components::auth::login::Login; use crate::components::auth::login::Login;
use crate::components::auth::setup::Setup; use crate::components::auth::setup::Setup;
@@ -146,33 +147,33 @@ fn InnerApp() -> impl IntoView {
<div class="flex h-screen bg-background"> <div class="flex h-screen bg-background">
// Sidebar skeleton // Sidebar skeleton
<div class="w-56 border-r border-border p-4 space-y-4"> <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="space-y-2">
<div class="h-6 w-full animate-pulse rounded-md bg-muted" /> <Skeleton class="h-6 w-full" />
<div class="h-6 w-full animate-pulse rounded-md bg-muted" /> <Skeleton class="h-6 w-full" />
<div class="h-6 w-4/5 animate-pulse rounded-md bg-muted" /> <Skeleton class="h-6 w-4/5" />
<div class="h-6 w-full animate-pulse rounded-md bg-muted" /> <Skeleton class="h-6 w-full" />
<div class="h-6 w-3/5 animate-pulse rounded-md bg-muted" /> <Skeleton class="h-6 w-3/5" />
<div class="h-6 w-full animate-pulse rounded-md bg-muted" /> <Skeleton class="h-6 w-full" />
</div> </div>
</div> </div>
// Main content skeleton // Main content skeleton
<div class="flex-1 flex flex-col"> <div class="flex-1 flex flex-col">
<div class="border-b border-border p-4 flex items-center gap-4"> <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" /> <Skeleton class="h-8 w-48" />
<div class="h-8 w-64 animate-pulse rounded-md bg-muted" /> <Skeleton class="h-8 w-64" />
<div class="ml-auto"><div class="h-8 w-24 animate-pulse rounded-md bg-muted" /></div> <div class="ml-auto"><Skeleton class="h-8 w-24" /></div>
</div> </div>
<div class="flex-1 p-4 space-y-3"> <div class="flex-1 p-4 space-y-3">
<div class="h-10 w-full animate-pulse rounded-md bg-muted" /> <Skeleton class="h-10 w-full" />
<div class="h-10 w-full animate-pulse rounded-md bg-muted" /> <Skeleton class="h-10 w-full" />
<div class="h-10 w-full animate-pulse rounded-md bg-muted" /> <Skeleton class="h-10 w-full" />
<div class="h-10 w-full animate-pulse rounded-md bg-muted" /> <Skeleton class="h-10 w-full" />
<div class="h-10 w-full animate-pulse rounded-md bg-muted" /> <Skeleton class="h-10 w-full" />
<div class="h-10 w-3/4 animate-pulse rounded-md bg-muted" /> <Skeleton class="h-10 w-3/4" />
</div> </div>
<div class="border-t border-border p-3"> <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> </div>
</div> </div>

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

@@ -14,6 +14,7 @@ pub mod select;
pub mod separator; pub mod separator;
pub mod sheet; pub mod sheet;
pub mod sidenav; pub mod sidenav;
pub mod skeleton;
pub mod svg_icon; pub mod svg_icon;
pub mod table; pub mod table;
pub mod theme_toggle; pub mod theme_toggle;

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

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