feat: improve loaders and styles

This commit is contained in:
Vasily Zubarev
2025-03-24 19:52:09 +01:00
parent df2d646a47
commit a80684c3fb
8 changed files with 143 additions and 12 deletions

View File

@@ -33,8 +33,8 @@
--sidebar-foreground: 200 10% 30%;
--sidebar-primary: 200 13% 80%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 200 13% 90%;
--sidebar-accent-foreground: 200 10% 30%;
--sidebar-accent: 240 5.9% 10%;
--sidebar-accent-foreground: 0 0% 98%;
--sidebar-border: 200 13% 85%;
--sidebar-ring: 200 13% 80%;
}
@@ -68,8 +68,8 @@
--sidebar-foreground: 200 10% 90%;
--sidebar-primary: 200 13% 60%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 200 13% 25%;
--sidebar-accent-foreground: 200 10% 90%;
--sidebar-accent: 240 5.9% 10%;
--sidebar-accent-foreground: 0 0% 98%;
--sidebar-border: 200 13% 25%;
--sidebar-ring: 200 13% 60%;
}

10
app/settings/loading.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { Skeleton } from "@/components/ui/skeleton"
export default function Loading() {
return (
<div className="flex flex-col gap-4 w-full">
<Skeleton className="h-10 w-56" />
<Skeleton className="w-full h-[350px]" />
</div>
)
}

View File

@@ -2,6 +2,9 @@ import { Skeleton } from "@/components/ui/skeleton"
export default function Loading() {
return (
<Skeleton className="flex flex-row flex-wrap md:flex-nowrap justify-center items-start gap-10 p-5 bg-accent max-w-[1200px] min-h-[800px]" />
<div className="flex flex-wrap flex-row items-start justify-center gap-4 max-w-6xl">
<Skeleton className="w-full h-[800px]" />
<Skeleton className="w-1/3 max-w-[380px]" />
</div>
)
}

View File

@@ -6,7 +6,10 @@ export default function Loading() {
return (
<>
<header className="flex items-center justify-between mb-12">
<h2 className="text-3xl font-bold tracking-tight">Transactions</h2>
<h2 className="flex flex-row gap-3 md:gap-5">
<span className="text-3xl font-bold tracking-tight">Transactions</span>
<Skeleton className="h-10 w-16" />
</h2>
<div className="flex gap-2">
<Button variant="outline">
<Download />
@@ -18,9 +21,17 @@ export default function Loading() {
</div>
</header>
<div className="flex flex-row gap-2 w-full">
<Skeleton className="h-8 w-full" />
<Skeleton className="h-8 w-full" />
<Skeleton className="h-8 w-full" />
<Skeleton className="h-8 w-full" />
<Skeleton className="h-8 w-full" />
</div>
<main>
<div className="flex flex-col gap-3 w-full">
{[...Array(20)].map((_, i) => (
{[...Array(15)].map((_, i) => (
<Skeleton key={i} className="h-8" />
))}
</div>

31
app/unsorted/loading.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { Skeleton } from "@/components/ui/skeleton"
import { Loader2 } from "lucide-react"
export default function Loading() {
return (
<div className="flex flex-col gap-4">
<header className="flex items-center justify-between">
<h2 className="text-3xl font-bold tracking-tight flex flex-row gap-2">
<Loader2 className="h-10 w-10 animate-spin" /> <span>Loading unsorted files...</span>
</h2>
</header>
<Skeleton className="w-full h-[800px] flex flex-row flex-wrap md:flex-nowrap justify-center items-start gap-5 p-6">
<Skeleton className="w-full h-full" />
<div className="w-full flex flex-col gap-5">
<Skeleton className="w-full h-12 mb-7" />
{[...Array(4)].map((_, i) => (
<div key={i} className="flex flex-col gap-2">
<Skeleton className="w-[120px] h-4" />
<Skeleton className="w-full h-9" />
</div>
))}
<div className="flex flex-row justify-end gap-2 mt-2">
<Skeleton className="w-[80px] h-9" />
<Skeleton className="w-[130px] h-9" />
</div>
</div>
</Skeleton>
</div>
)
}