From 7d89c134cba0cdbf56f9efce95e11d084df9698a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Tue, 4 Aug 2026 10:48:02 -0300
Subject: [PATCH] Match seller detail loading state to page

---
 src/pages/SellerDetails.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/pages/SellerDetails.tsx b/src/pages/SellerDetails.tsx
index 71bd885..250359b 100644
--- a/src/pages/SellerDetails.tsx
+++ b/src/pages/SellerDetails.tsx
@@ -10,6 +10,23 @@ import type { DateRange, SellerDetailsAnalytics } from '../types';
 const formatNumber = (value: number) => new Intl.NumberFormat('pt-BR', { maximumFractionDigits: 0 }).format(value);
 const formatCurrency = (value: number) => new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
 
+const SellerDetailsSkeleton = () => (
+  <div className="space-y-6" aria-label="Carregando detalhes do vendedor">
+    <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
+      <div className="space-y-3"><div className="skeleton h-4 w-24" /><div className="skeleton h-7 w-64" /><div className="skeleton h-4 w-96 max-w-full" /></div>
+      <div className="skeleton h-11 w-56" />
+    </div>
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+      {[1, 2, 3, 4].map(item => <div key={item} className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm"><div className="skeleton h-3 w-20" /><div className="skeleton mt-3 h-7 w-32" /></div>)}
+    </div>
+    <div className="grid grid-cols-1 gap-6 xl:grid-cols-[1.3fr_0.7fr]">
+      <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm"><div className="skeleton h-5 w-40" /><div className="skeleton mt-2 h-4 w-48" /><div className="mt-6 space-y-4">{[1, 2, 3, 4, 5, 6].map(item => <div key={item} className="grid grid-cols-[52px_1fr_72px] items-center gap-3"><div className="skeleton h-3" /><div className="skeleton h-2" /><div className="skeleton h-3" /></div>)}</div></div>
+      <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm"><div className="skeleton h-5 w-20" /><div className="skeleton mt-2 h-4 w-40" /><div className="mt-6 space-y-3">{[1, 2, 3].map(item => <div key={item} className="rounded-xl border border-dark-border p-3"><div className="skeleton h-4 w-28" /><div className="skeleton mt-2 h-3 w-40" /></div>)}</div></div>
+    </div>
+    <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">{[1, 2].map(item => <div key={item} className="overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm"><div className="border-b border-dark-border p-5"><div className="skeleton h-5 w-40" /></div><div className="space-y-0">{[1, 2, 3, 4].map(row => <div key={row} className="flex items-center justify-between gap-4 border-b border-dark-border p-4 last:border-b-0"><div><div className="skeleton h-4 w-48" /><div className="skeleton mt-2 h-3 w-20" /></div><div className="skeleton h-4 w-20" /></div>)}</div></div>)}</div>
+  </div>
+);
+
 const SellerDetails = () => {
   const { sellerId = '' } = useParams<{ sellerId: string }>();
   const { dateRange, setDateRange } = useOutletContext<{ dateRange: DateRange; setDateRange: (range: DateRange) => void }>();
@@ -34,7 +51,7 @@ const SellerDetails = () => {
   const safeTrendPage = Math.min(trendPage, trendTotalPages || 1);
   const trendStartIndex = (safeTrendPage - 1) * trendPageSize;
   const paginatedTrend = details?.chartData.slice(trendStartIndex, trendStartIndex + trendPageSize) || [];
-  if (isLoading && !details) return <div className="space-y-4">{[1, 2, 3, 4].map(item => <div key={item} className="skeleton h-28" />)}</div>;
+  if (isLoading && !details) return <SellerDetailsSkeleton />;
   if (!details) return <div className="rounded-2xl border border-dark-border bg-dark-card p-10 text-center"><p className="font-bold text-dark-text">Vendedor não encontrado no período.</p><Link to="/sellers" className="mt-4 inline-flex text-sm font-bold text-brand-primary">Voltar para vendedores</Link></div>;
   const { seller } = details;