Add skeleton loaders to client and product pages

src/pages/ProductDetails.tsx

@@ -32,6 +32,43 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
   return null;
 };
 
+const ProductDetailsSkeleton = () => (
+  <div className="space-y-6" aria-label="Carregando produto">
+    <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+      <div className="flex flex-col gap-4">
+        <div className="skeleton h-4 w-20" />
+        <div className="flex items-center gap-4">
+          <div className="skeleton h-16 w-16 rounded-2xl" />
+          <div>
+            <div className="skeleton h-3 w-24" />
+            <div className="skeleton mt-3 h-7 w-80 max-w-[70vw]" />
+          </div>
+        </div>
+      </div>
+      <div className="skeleton h-10 w-64" />
+    </div>
+
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {[0, 1].map(item => (
+        <div key={`product-details-kpi-skeleton-${item}`} className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
+          <div className="flex justify-between gap-6">
+            <div className="w-full">
+              <div className="skeleton h-3 w-36" />
+              <div className="skeleton mt-3 h-8 w-32" />
+            </div>
+            <div className="skeleton h-12 w-12 shrink-0 rounded-xl" />
+          </div>
+        </div>
+      ))}
+    </div>
+
+    <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
+      <div className="skeleton h-5 w-56" />
+      <div className="mt-8 skeleton h-[400px] w-full" />
+    </div>
+  </div>
+);
+
 const ProductDetails = () => {
   const { id } = useParams<{ id: string }>();
   const { dateRange, setDateRange } = useOutletContext<{ 
@@ -74,11 +111,7 @@ const ProductDetails = () => {
   };
 
   if (isLoading) {
-    return (
-      <div className="text-center py-12">
-        <p className="text-zinc-500 dark:text-dark-muted font-medium">Carregando produto...</p>
-      </div>
-    );
+    return <ProductDetailsSkeleton />;
   }
 
   if (!details?.productInfo) {