changes

src/app/pages/search/search.component.ts

@@ -3,6 +3,7 @@ import { DecimalPipe } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { ApiService, CartService } from '../../services';
+import { PrefetchService } from '../../services/prefetch.service';
 import { Item } from '../../models';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@@ -10,6 +11,7 @@ import { getDiscountedPrice, getMainImage, trackByItemId } from '../../utils/ite
 import { LangRoutePipe } from '../../pipes/lang-route.pipe';
 import { TranslatePipe } from '../../i18n/translate.pipe';
 import { TranslateService } from '../../i18n/translate.service';
+import { SEARCH_DEBOUNCE_MS, ITEMS_PER_PAGE, SCROLL_THRESHOLD_PX, SCROLL_DEBOUNCE_MS } from '../../config/constants';
 
 @Component({
   selector: 'app-search',
@@ -27,7 +29,7 @@ export class SearchComponent implements OnDestroy {
   totalResults = signal<number>(0);
   
   private skip = 0;
-  private readonly count = 20;
+  private readonly count = ITEMS_PER_PAGE;
   private isLoadingMore = false;
   private searchSubject = new Subject<string>();
   private searchSubscription: Subscription;
@@ -35,11 +37,12 @@ export class SearchComponent implements OnDestroy {
 
   constructor(
     private apiService: ApiService,
-    private cartService: CartService
+    private cartService: CartService,
+    private prefetchService: PrefetchService
   ) {
     this.searchSubscription = this.searchSubject
       .pipe(
-        debounceTime(300),
+        debounceTime(SEARCH_DEBOUNCE_MS),
         distinctUntilChanged()
       )
       .subscribe(query => {
@@ -119,12 +122,12 @@ export class SearchComponent implements OnDestroy {
     
     this.scrollTimeout = setTimeout(() => {
       const scrollPosition = window.innerHeight + window.scrollY;
-      const bottomPosition = document.documentElement.scrollHeight - 500;
+      const bottomPosition = document.documentElement.scrollHeight - SCROLL_THRESHOLD_PX;
 
       if (scrollPosition >= bottomPosition && !this.loading() && this.hasMore()) {
         this.loadResults();
       }
-    }, 100);
+    }, SCROLL_DEBOUNCE_MS);
   }
 
   addToCart(itemID: number, event: Event): void {
@@ -133,6 +136,11 @@ export class SearchComponent implements OnDestroy {
     this.cartService.addItem(itemID);
   }
 
+  onItemHover(itemID: number): void {
+    this.prefetchService.prefetchItem(itemID);
+  }
+
+  readonly skeletonSlots = Array.from({ length: 8 });
   readonly getDiscountedPrice = getDiscountedPrice;
   readonly getMainImage = getMainImage;
   readonly trackByItemId = trackByItemId;