git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-05-09 19:01:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: atualiza loadings e skeletons do dashboard

Browse Source
This commit is contained in:
Felipe Coutinho
2026-03-15 23:23:53 +00:00
parent e84becd1cd
commit 1823b6be56
23 changed files with 292 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(dashboard)/accounts/[accountId]/statement/loading.tsx
View File

@@ -13,7 +13,7 @@ export default function ExtratoLoading() {
return (
<main className="flex flex-col gap-6">
{/* Month Picker placeholder */}
<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
<div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
{/* Account Statement Card */}
<AccountStatementCardSkeleton />
@@ -23,7 +23,7 @@ export default function ExtratoLoading() {
<div className="space-y-6 pt-4">
{/* Header */}
<div className="flex items-center justify-between">
<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />
<Skeleton className="h-8 w-48 rounded-md bg-foreground/10" />
</div>
{/* Filtros */}

18
src/app/(dashboard)/accounts/loading.tsx
View File

@@ -6,23 +6,23 @@ export default function ContasLoading() {
<div className="space-y-6 pt-4">
{/* Header */}
<div className="flex items-center justify-between">
<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
<Skeleton className="h-8 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
</div>
{/* Grid de contas */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-6 space-y-4">
<div key={i} className="rounded-md border p-6 space-y-4">
<div className="flex items-center justify-between">
<Skeleton className="size-10 rounded-2xl bg-foreground/10" />
<Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" />
<Skeleton className="size-10 rounded-md bg-foreground/10" />
<Skeleton className="h-8 w-16 rounded-md bg-foreground/10" />
</div>
<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-6 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
<div className="flex gap-2">
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
</div>
</div>
))}

30
src/app/(dashboard)/budgets/loading.tsx
View File

@@ -8,53 +8,53 @@ export default function OrcamentosLoading() {
return (
<main className="flex flex-col gap-6">
{/* Month Picker placeholder */}
<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
<div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
<div className="space-y-6 pt-4">
{/* Header */}
<div className="flex items-center justify-between">
<div className="space-y-2">
<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />
<Skeleton className="h-5 w-64 rounded-2xl bg-foreground/10" />
<Skeleton className="h-8 w-48 rounded-md bg-foreground/10" />
<Skeleton className="h-5 w-64 rounded-md bg-foreground/10" />
</div>
<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
</div>
{/* Grid de cards de orçamentos */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-6 space-y-4">
<div key={i} className="rounded-md border p-6 space-y-4">
{/* Category com ícone */}
<div className="flex items-center gap-3">
<Skeleton className="size-10 rounded-2xl bg-foreground/10" />
<Skeleton className="size-10 rounded-md bg-foreground/10" />
<div className="flex-1 space-y-2">
<Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
<Skeleton className="h-5 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
</div>
</div>
{/* Valor orçado */}
<div className="space-y-2 pt-4 border-t">
<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
<Skeleton className="h-7 w-32 rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-24 rounded-md bg-foreground/10" />
<Skeleton className="h-7 w-32 rounded-md bg-foreground/10" />
</div>
{/* Valor gasto */}
<div className="space-y-2">
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
<Skeleton className="h-6 w-28 rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
<Skeleton className="h-6 w-28 rounded-md bg-foreground/10" />
</div>
{/* Barra de progresso */}
<div className="space-y-2">
<Skeleton className="h-2 w-full rounded-full bg-foreground/10" />
<Skeleton className="h-3 w-16 rounded-2xl bg-foreground/10" />
<Skeleton className="h-3 w-16 rounded-md bg-foreground/10" />
</div>
{/* Botões de ação */}
<div className="flex gap-2 pt-2">
<Skeleton className="h-9 flex-1 rounded-2xl bg-foreground/10" />
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
<Skeleton className="h-9 flex-1 rounded-md bg-foreground/10" />
<Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
</div>
</div>
))}

16
src/app/(dashboard)/calendar/loading.tsx
View File

@@ -8,15 +8,15 @@ export default function CalendarioLoading() {
return (
<main className="flex flex-col gap-3">
{/* Month Picker placeholder */}
<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
<div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
{/* Calendar Container */}
<div className="rounded-2xl border p-4 space-y-4">
<div className="rounded-md border p-4 space-y-4">
{/* Cabeçalho com dias da semana */}
<div className="grid grid-cols-7 gap-2 mb-4">
{["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"].map((day) => (
<div key={day} className="text-center">
<Skeleton className="h-4 w-12 mx-auto rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-12 mx-auto rounded-md bg-foreground/10" />
</div>
))}
</div>
@@ -26,17 +26,17 @@ export default function CalendarioLoading() {
{Array.from({ length: 42 }).map((_, i) => (
<div
key={i}
className="min-h-[100px] rounded-2xl border p-2 space-y-2"
className="min-h-[100px] rounded-md border p-2 space-y-2"
>
{/* Número do dia */}
<Skeleton className="h-5 w-6 rounded-2xl bg-foreground/10" />
<Skeleton className="h-5 w-6 rounded-md bg-foreground/10" />
{/* Indicadores de eventos (aleatório entre 0-3) */}
{i % 3 === 0 && (
<div className="space-y-1">
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
{i % 5 === 0 && (
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
)}
</div>
)}
@@ -49,7 +49,7 @@ export default function CalendarioLoading() {
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="flex items-center gap-2">
<Skeleton className="size-3 rounded-full bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
</div>
))}
</div>

6
src/app/(dashboard)/cards/[cardId]/invoice/loading.tsx
View File

@@ -13,7 +13,7 @@ export default function FaturaLoading() {
return (
<main className="flex flex-col gap-6">
{/* Month Picker placeholder */}
<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
<div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
{/* Invoice Summary Card */}
<section className="flex flex-col gap-4">
@@ -25,8 +25,8 @@ export default function FaturaLoading() {
<div className="space-y-6 pt-4">
{/* Header */}
<div className="flex items-center justify-between">
<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
<Skeleton className="h-8 w-48 rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
</div>
{/* Filtros */}

16
src/app/(dashboard)/cards/loading.tsx
View File

@@ -6,21 +6,21 @@ export default function CartoesLoading() {
<div className="space-y-6 pt-4">
{/* Header */}
<div className="flex items-center justify-between">
<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
<Skeleton className="h-8 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
</div>
{/* Grid de cartões */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-6 space-y-4">
<div key={i} className="rounded-md border p-6 space-y-4">
<div className="flex items-center justify-between">
<Skeleton className="size-10 rounded-2xl bg-foreground/10" />
<Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" />
<Skeleton className="size-10 rounded-md bg-foreground/10" />
<Skeleton className="h-8 w-16 rounded-md bg-foreground/10" />
</div>
<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
<Skeleton className="h-6 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-24 rounded-md bg-foreground/10" />
</div>
))}
</div>

2
src/app/(dashboard)/categories/history/loading.tsx
View File

@@ -25,7 +25,7 @@ export default function Loading() {
</div>
{/* Chart */}
<Skeleton className="h-[450px] w-full rounded-lg" />
<Skeleton className="h-[450px] w-full rounded-md" />
</CardContent>
</Card>
</main>

8
src/app/(dashboard)/categories/loading.tsx
View File

@@ -7,8 +7,8 @@ export default function CategoriasLoading() {
<div className="w-full space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
<Skeleton className="h-8 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
</div>
{/* Tabs */}
@@ -17,7 +17,7 @@ export default function CategoriasLoading() {
{Array.from({ length: 3 }).map((_, i) => (
<Skeleton
key={i}
className="h-10 w-32 rounded-t-2xl bg-foreground/10"
className="h-10 w-32 rounded-t-md bg-foreground/10"
/>
))}
</div>
@@ -40,7 +40,7 @@ export default function CategoriasLoading() {
key={i}
className="flex items-center gap-4 border-b border-dashed px-2 py-3 last:border-b-0"
>
<Skeleton className="size-8 rounded-lg bg-foreground/10" />
<Skeleton className="size-8 rounded-md bg-foreground/10" />
<Skeleton
className="h-4 rounded bg-foreground/10"
style={{ width: `${100 + (i % 4) * 30}px` }}

25
src/app/(dashboard)/dashboard/loading.tsx
View File

@@ -1,18 +1,29 @@
import { DashboardGridSkeleton } from "@/shared/components/skeletons";
import {
DashboardGridSkeleton,
DashboardMetricsCardsSkeleton,
} from "@/shared/components/skeletons";
import { Skeleton } from "@/shared/components/ui/skeleton";
export default function DashboardLoading() {
return (
<main className="flex flex-col gap-4">
<div className="space-y-2 px-1 py-2">
<Skeleton className="h-8 w-72 rounded-xl bg-foreground/10" />
<Skeleton className="h-5 w-56 rounded-xl bg-foreground/10" />
<div className="space-y-2 p-2">
<Skeleton className="h-7 w-56 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-48 rounded-md bg-foreground/10" />
</div>
{/* Month Picker skeleton */}
<Skeleton className="h-[56px] w-full rounded-xl bg-foreground/10" />
<div className="h-[60px] rounded-md border bg-card/60 p-4">
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<Skeleton className="size-8 rounded-md bg-foreground/10" />
<Skeleton className="h-5 w-36 rounded-md bg-foreground/10" />
<Skeleton className="size-8 rounded-md bg-foreground/10" />
</div>
<Skeleton className="hidden h-8 w-24 rounded-md bg-foreground/10 sm:block" />
</div>
</div>
{/* Dashboard content skeleton (Section Cards + Widget Grid) */}
<DashboardMetricsCardsSkeleton />
<DashboardGridSkeleton />
</main>
);

18
src/app/(dashboard)/insights/loading.tsx
View File

@@ -9,26 +9,26 @@ export default function InsightsLoading() {
<div className="space-y-6 pt-4">
{/* Header */}
<div className="space-y-2">
<Skeleton className="h-10 w-64 rounded-2xl bg-foreground/10" />
<Skeleton className="h-6 w-96 rounded-2xl bg-foreground/10" />
<Skeleton className="h-10 w-64 rounded-md bg-foreground/10" />
<Skeleton className="h-6 w-96 rounded-md bg-foreground/10" />
</div>
{/* Grid de insights */}
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-6 space-y-4">
<div key={i} className="rounded-md border p-6 space-y-4">
<div className="flex items-start justify-between">
<div className="space-y-2 flex-1">
<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-3/4 rounded-2xl bg-foreground/10" />
<Skeleton className="h-6 w-48 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-3/4 rounded-md bg-foreground/10" />
</div>
<Skeleton className="size-8 rounded-full bg-foreground/10" />
</div>
<div className="space-y-2">
<Skeleton className="h-3 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-3 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-3 w-2/3 rounded-2xl bg-foreground/10" />
<Skeleton className="h-3 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-3 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-3 w-2/3 rounded-md bg-foreground/10" />
</div>
</div>
))}

22
src/app/(dashboard)/notes/loading.tsx
View File

@@ -10,33 +10,33 @@ export default function AnotacoesLoading() {
<div className="w-full space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
<Skeleton className="h-8 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
</div>
{/* Grid de cards de notas */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-4 space-y-3">
<div key={i} className="rounded-md border p-4 space-y-3">
{/* Título */}
<Skeleton className="h-6 w-3/4 rounded-2xl bg-foreground/10" />
<Skeleton className="h-6 w-3/4 rounded-md bg-foreground/10" />
{/* Conteúdo (3-4 linhas) */}
<div className="space-y-2">
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-2/3 rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-2/3 rounded-md bg-foreground/10" />
{i % 2 === 0 && (
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
)}
</div>
{/* Footer com data e ações */}
<div className="flex items-center justify-between pt-2 border-t">
<Skeleton className="h-3 w-24 rounded-2xl bg-foreground/10" />
<Skeleton className="h-3 w-24 rounded-md bg-foreground/10" />
<div className="flex gap-1">
<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
<Skeleton className="size-8 rounded-md bg-foreground/10" />
<Skeleton className="size-8 rounded-md bg-foreground/10" />
</div>
</div>
</div>

42
src/app/(dashboard)/payers/[payerId]/loading.tsx
View File

@@ -7,63 +7,63 @@ import { Skeleton } from "@/shared/components/ui/skeleton";
export default function PagadorDetailsLoading() {
return (
<main className="flex flex-col gap-6">
<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
<div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
<div className="space-y-6 pt-4">
<div className="flex gap-2 border-b">
<Skeleton className="h-10 w-32 rounded-t-2xl bg-foreground/10" />
<Skeleton className="h-10 w-32 rounded-t-2xl bg-foreground/10" />
<Skeleton className="h-10 w-36 rounded-t-2xl bg-foreground/10" />
<Skeleton className="h-10 w-32 rounded-t-md bg-foreground/10" />
<Skeleton className="h-10 w-32 rounded-t-md bg-foreground/10" />
<Skeleton className="h-10 w-36 rounded-t-md bg-foreground/10" />
</div>
<div className="rounded-2xl border p-6 space-y-4">
<div className="rounded-md border p-6 space-y-4">
<div className="flex items-start gap-4">
<Skeleton className="size-20 rounded-full bg-foreground/10" />
<div className="flex-1 space-y-3">
<div className="flex items-center gap-3">
<Skeleton className="h-7 w-48 rounded-2xl bg-foreground/10" />
<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
<Skeleton className="h-7 w-48 rounded-md bg-foreground/10" />
<Skeleton className="h-6 w-20 rounded-md bg-foreground/10" />
</div>
<Skeleton className="h-5 w-64 rounded-2xl bg-foreground/10" />
<Skeleton className="h-5 w-64 rounded-md bg-foreground/10" />
<div className="flex items-center gap-2">
<Skeleton className="size-2 rounded-full bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded-md bg-foreground/10" />
</div>
</div>
<div className="flex gap-2">
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
<Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
<Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
</div>
</div>
</div>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div className="rounded-2xl border p-6 space-y-4 lg:col-span-2">
<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
<div className="rounded-md border p-6 space-y-4 lg:col-span-2">
<Skeleton className="h-6 w-48 rounded-md bg-foreground/10" />
<div className="grid grid-cols-3 gap-4 pt-4">
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="space-y-2">
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
<Skeleton className="h-7 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
<Skeleton className="h-7 w-full rounded-md bg-foreground/10" />
</div>
))}
</div>
</div>
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-6 space-y-4">
<div key={i} className="rounded-md border p-6 space-y-4">
<div className="flex items-center gap-2">
<Skeleton className="size-5 rounded-2xl bg-foreground/10" />
<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
<Skeleton className="size-5 rounded-md bg-foreground/10" />
<Skeleton className="h-6 w-32 rounded-md bg-foreground/10" />
</div>
<div className="space-y-3 pt-4">
<Skeleton className="h-5 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-5 w-3/4 rounded-2xl bg-foreground/10" />
<Skeleton className="h-5 w-1/2 rounded-2xl bg-foreground/10" />
<Skeleton className="h-5 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-5 w-3/4 rounded-md bg-foreground/10" />
<Skeleton className="h-5 w-1/2 rounded-md bg-foreground/10" />
</div>
</div>
))}

26
src/app/(dashboard)/payers/loading.tsx
View File

@@ -9,44 +9,44 @@ export default function PagadoresLoading() {
<main className="flex flex-col items-start gap-6">
<div className="w-full space-y-6">
{/* Input de código de compartilhamento */}
<div className="rounded-2xl border p-4 space-y-3">
<Skeleton className="h-5 w-64 rounded-2xl bg-foreground/10" />
<div className="rounded-md border p-4 space-y-3">
<Skeleton className="h-5 w-64 rounded-md bg-foreground/10" />
<div className="flex gap-2">
<Skeleton className="h-10 flex-1 rounded-2xl bg-foreground/10" />
<Skeleton className="h-10 w-32 rounded-2xl bg-foreground/10" />
<Skeleton className="h-10 flex-1 rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-32 rounded-md bg-foreground/10" />
</div>
</div>
{/* Grid de cards de pagadores */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-6 space-y-4">
<div key={i} className="rounded-md border p-6 space-y-4">
{/* Avatar + Nome + Badge */}
<div className="flex items-start gap-4">
<Skeleton className="size-16 rounded-full bg-foreground/10" />
<div className="flex-1 space-y-2">
<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
<Skeleton className="h-5 w-20 rounded-2xl bg-foreground/10" />
<Skeleton className="h-6 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-5 w-20 rounded-md bg-foreground/10" />
</div>
{i === 0 && (
<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
<Skeleton className="h-6 w-16 rounded-md bg-foreground/10" />
)}
</div>
{/* Email */}
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
{/* Status */}
<div className="flex items-center gap-2">
<Skeleton className="size-2 rounded-full bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded-md bg-foreground/10" />
</div>
{/* Botões de ação */}
<div className="flex gap-2 pt-2 border-t">
<Skeleton className="h-9 flex-1 rounded-2xl bg-foreground/10" />
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
<Skeleton className="h-9 flex-1 rounded-md bg-foreground/10" />
<Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
<Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
</div>
</div>
))}

2
src/app/(dashboard)/reports/card-usage/loading.tsx
View File

@@ -22,7 +22,7 @@ export default function Loading() {
{/* Cards grid */}
<div className="grid gap-2 grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
{[1, 2, 3, 4].map((i) => (
<Skeleton key={i} className="h-16 w-full rounded-lg" />
<Skeleton key={i} className="h-16 w-full rounded-md" />
))}
</div>

6
src/app/(dashboard)/transactions/loading.tsx
View File

@@ -12,13 +12,13 @@ export default function LancamentosLoading() {
return (
<main className="flex flex-col gap-6">
{/* Month Picker placeholder */}
<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
<div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
<div className="space-y-6 pt-4">
{/* Header com título e botão */}
<div className="flex items-center justify-between">
<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
<Skeleton className="h-8 w-48 rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
</div>
{/* Filtros */}