From 993bd3890af6d93180fa17eebfac6fe86ce2559d Mon Sep 17 00:00:00 2001
From: rever-tecnologia <revertecnologia@gmail.com>
Date: Thu, 18 Dec 2025 11:31:17 -0300
Subject: [PATCH] style(devices): substitui spinner por skeleton cards no
 loading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cria DeviceCardSkeleton que simula a estrutura do DeviceCard
- Exibe grid de 6 skeletons durante carregamento
- Mantém mesmo layout responsivo dos cards reais

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../admin/devices/admin-devices-overview.tsx  | 48 +++++++++++++++----
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/components/admin/devices/admin-devices-overview.tsx b/src/components/admin/devices/admin-devices-overview.tsx
index ecbf130..2502a11 100644
--- a/src/components/admin/devices/admin-devices-overview.tsx
+++ b/src/components/admin/devices/admin-devices-overview.tsx
@@ -50,6 +50,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { Spinner } from "@/components/ui/spinner"
+import { Skeleton } from "@/components/ui/skeleton"
 import { Progress } from "@/components/ui/progress"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
@@ -2719,18 +2720,45 @@ function EmptyState() {
   )
 }
 
+function DeviceCardSkeleton() {
+  return (
+    <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+      <div className="flex items-start gap-3">
+        <Skeleton className="size-10 rounded-lg" />
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-3 w-24" />
+        </div>
+        <Skeleton className="h-5 w-16 rounded-full" />
+      </div>
+      <div className="mt-4 space-y-3">
+        <div className="flex items-center gap-2">
+          <Skeleton className="size-4 rounded" />
+          <Skeleton className="h-3 w-28" />
+        </div>
+        <div className="flex items-center gap-2">
+          <Skeleton className="size-4 rounded" />
+          <Skeleton className="h-3 w-36" />
+        </div>
+        <div className="flex items-center gap-2">
+          <Skeleton className="size-4 rounded" />
+          <Skeleton className="h-3 w-20" />
+        </div>
+      </div>
+      <div className="mt-4 flex gap-2">
+        <Skeleton className="h-2 flex-1 rounded-full" />
+        <Skeleton className="h-2 flex-1 rounded-full" />
+      </div>
+    </div>
+  )
+}
+
 function LoadingState() {
   return (
-    <div className="flex flex-col items-center gap-3 rounded-lg border border-dashed border-slate-300 bg-slate-50/50 py-12 text-center">
-      <div className="inline-flex size-12 items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm">
-        <Spinner className="size-6 text-slate-500" />
-      </div>
-      <div className="space-y-1">
-        <p className="text-sm font-semibold text-slate-600">Carregando dispositivos...</p>
-        <p className="text-sm text-muted-foreground">
-          Sincronizando o inventário em tempo real. Isso leva apenas alguns instantes.
-        </p>
-      </div>
+    <div className="grid grid-cols-1 gap-3 [@supports(display:grid)]:grid-cols-[repeat(auto-fit,minmax(280px,1fr))]">
+      {Array.from({ length: 6 }).map((_, i) => (
+        <DeviceCardSkeleton key={i} />
+      ))}
     </div>
   )
 }