changes

src/app/pages/home/home.component.html

@@ -19,10 +19,23 @@
     <app-items-carousel />
 
     @if (loading()) {
-      <div class="novo-loading">
-        <div class="novo-spinner"></div>
-        <p>​{{ 'home.loading' | translate }}</p>
-      </div>
+      <section class="novo-categories">
+        <div class="novo-section-header">
+          <div class="skeleton-line" style="height: 32px; width: 200px; margin: 0 auto 12px;"></div>
+          <div class="skeleton-line" style="height: 18px; width: 300px; margin: 0 auto;"></div>
+        </div>
+        <div class="novo-categories-grid">
+          @for (i of skeletonSlots; track i) {
+            <div class="novo-category-card skeleton-card">
+              <div class="novo-category-image skeleton-image"></div>
+              <div class="novo-category-info">
+                <div class="skeleton-line" style="height: 18px; width: 70%;"></div>
+                <div class="skeleton-line" style="height: 18px; width: 20px;"></div>
+              </div>
+            </div>
+          }
+        </div>
+      </section>
     }
 
     @if (error()) {
@@ -101,10 +114,20 @@
     <app-items-carousel />
 
     @if (loading()) {
-      <div class="dexar-loading">
-        <div class="dexar-spinner"></div>
-        <p>{{ 'home.loadingDexar' | translate }}</p>
-      </div>
+      <section class="dexar-categories">
+        <div class="skeleton-line" style="height: 36px; width: 220px; margin-bottom: 40px;"></div>
+        <div class="dexar-categories-grid">
+          @for (i of skeletonSlots; track i) {
+            <div class="dexar-category-card skeleton-card">
+              <div class="dexar-category-image skeleton-image"></div>
+              <div class="dexar-category-info">
+                <div class="skeleton-line" style="height: 16px; width: 75%;"></div>
+                <div class="skeleton-line" style="height: 12px; width: 40%; margin-top: 4px;"></div>
+              </div>
+            </div>
+          }
+        </div>
+      </section>
     }
 
     @if (error()) {

src/app/pages/home/home.component.scss

@@ -896,3 +896,26 @@
     transform: translateY(-2px);
   }
 }
+
+// Skeleton loading cards
+.skeleton-card {
+  pointer-events: none;
+}
+
+.skeleton-image {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.skeleton-line {
+  border-radius: 6px;
+  background: linear-gradient(90deg, #e8e8e8 25%, #d8d8d8 50%, #e8e8e8 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}

src/app/pages/home/home.component.ts

@@ -21,6 +21,7 @@ export class HomeComponent implements OnInit, OnDestroy {
   wideCategories = signal<Set<number>>(new Set());
   loading = signal(true);
   error = signal<string | null>(null);
+  readonly skeletonSlots = Array.from({ length: 6 });
   
   // Memoized computed values for performance
   topLevelCategories = computed(() => {