mirror of
https://github.com/marcogll/TaxHacker_s23.git
synced 2026-01-13 21:35:19 +00:00
feat: improve loaders and styles
This commit is contained in:
@@ -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
10
app/settings/loading.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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
31
app/unsorted/loading.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user