Add skeleton loaders to client and product pages

src/pages/Products.tsx

@@ -6,6 +6,37 @@ import type { DateRange, ProductAnalyticsItem } from '../types';
 import { exportToCSV, fetchProductAnalytics } from '../dataService';
 import type { ProductSummary } from '../analytics/products';
 
+const ProductTableSkeleton = () => (
+  <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm" aria-label="Carregando produtos">
+    <div className="border-b border-zinc-100 p-4 dark:border-dark-border">
+      <div className="grid grid-cols-[120px_1.5fr_120px_100px_140px_110px] gap-6">
+        {[0, 1, 2, 3, 4, 5].map(item => (
+          <div key={`products-head-skeleton-${item}`} className="skeleton h-3" />
+        ))}
+      </div>
+    </div>
+    <div className="divide-y divide-zinc-100 dark:divide-dark-border">
+      {[0, 1, 2, 3, 4, 5, 6, 7].map(row => (
+        <div key={`products-row-skeleton-${row}`} className="grid grid-cols-[120px_1.5fr_120px_100px_140px_110px] gap-6 px-6 py-4">
+          <div className="skeleton h-4" />
+          <div>
+            <div className="skeleton h-4 w-4/5" />
+            <div className="skeleton mt-2 h-3 w-32" />
+          </div>
+          <div className="skeleton h-4" />
+          <div className="skeleton h-4" />
+          <div className="skeleton h-4" />
+          <div className="skeleton h-7 rounded-lg" />
+        </div>
+      ))}
+    </div>
+    <div className="flex items-center justify-between border-t border-zinc-100 p-4 dark:border-dark-border">
+      <div className="skeleton h-4 w-48" />
+      <div className="skeleton h-8 w-56" />
+    </div>
+  </div>
+);
+
 const Products = () => {
   const { dateRange, setDateRange } = useOutletContext<{
     dateRange: DateRange, 
@@ -119,13 +150,16 @@ const Products = () => {
         </div>
       </div>
 
-      {isLoading && (
+      {isLoading && productAnalytics.length > 0 && (
         <div className="inline-flex items-center gap-2 rounded-xl border border-dark-border bg-dark-card px-3 py-2 text-sm font-semibold text-dark-muted">
           <Loader2 className="h-4 w-4 animate-spin text-brand-primary" />
           Atualizando produtos
         </div>
       )}
 
+      {isLoading && productAnalytics.length === 0 ? (
+        <ProductTableSkeleton />
+      ) : (
       <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm">
         <div className="overflow-x-auto">
           <table className="w-full text-left text-sm">
@@ -217,6 +251,7 @@ const Products = () => {
           </div>
         </div>
       </div>
+      )}
     </div>
   );
 };