changes

src/app/pages/search/search.component.html

@@ -56,7 +56,7 @@
   @if (items().length > 0) {
     <div class="items-grid">
       @for (item of items(); track trackByItemId($index, item)) {
-        <div class="item-card">
+        <div class="item-card" (mouseenter)="onItemHover(item.itemID)">
           <a [routerLink]="['/item', item.itemID] | langRoute" class="item-link">
             <div class="item-image">
               <img [src]="getMainImage(item)" [alt]="item.name" loading="lazy" decoding="async" width="300" height="300" />
@@ -94,19 +94,29 @@
             </div>
           </a>
           
-          <button class="add-to-cart-btn" (click)="addToCart(item.itemID, $event)">
+          <button class="add-to-cart-btn" (click)="addToCart(item.itemID, $event)" [attr.aria-label]="('search.addToCart' | translate) + ': ' + item.name">
             {{ 'search.addToCart' | translate }}
           </button>
         </div>
       }
     </div>
 
-    @if (loading() && items().length > 0) {
-      <div class="loading-more">
-        <div class="spinner"></div>
-        <p>{{ 'search.loadingMore' | translate }}</p>
-      </div>
-    }
+      @if (loading() && items().length > 0) {
+        @for (i of skeletonSlots; track i) {
+          <div class="item-card skeleton-card">
+            <div class="item-link">
+              <div class="item-image skeleton-image"></div>
+              <div class="item-details">
+                <div class="skeleton-line skeleton-title"></div>
+                <div class="skeleton-line skeleton-rating"></div>
+                <div class="skeleton-line skeleton-price"></div>
+                <div class="skeleton-line skeleton-stock"></div>
+              </div>
+            </div>
+            <div class="skeleton-btn"></div>
+          </div>
+        }
+      }
 
     @if (!hasMore() && items().length > 0) {
       <div class="no-more">