perf: debounce price-range/slider filter inputs

updateRange()/updateSlider() emitted stateChange synchronously on
every keystroke/drag event, triggering a full catalog filter
recompute each time. Debounced both (350ms, per filterId+key timer,
cleared on destroy).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/features/website/catalog/components/filters-panel/filters-panel.component.ts

@@ -1,8 +1,10 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, Output, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { FilterGroup, SearchFilterState } from '../../../../../core/search/models/search.model';
 import { TranslatePipe } from '../../../../../i18n/translate.pipe';
 
+const RANGE_DEBOUNCE_MS = 350;
+
 @Component({
   selector: 'app-catalog-filters-panel',
   standalone: true,
@@ -11,12 +13,20 @@ import { TranslatePipe } from '../../../../../i18n/translate.pipe';
   styleUrls: ['./filters-panel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CatalogFiltersPanelComponent {
+export class CatalogFiltersPanelComponent implements OnDestroy {
   @Input() definitions: FilterGroup[] = [];
   @Input() state: SearchFilterState = { values: {}, ranges: {}, toggles: {} };
 
   @Output() stateChange = new EventEmitter<SearchFilterState>();
 
+  private readonly debounceTimers = new Map<string, ReturnType<typeof setTimeout>>();
+
+  ngOnDestroy(): void {
+    for (const timer of this.debounceTimers.values()) {
+      clearTimeout(timer);
+    }
+  }
+
   readonly collapsed = signal<Record<string, boolean>>({});
 
   toggleGroup(filterId: string): void {
@@ -79,8 +89,9 @@ export class CatalogFiltersPanelComponent {
 
   updateRange(filterId: string, key: 'min' | 'max', rawValue: string): void {
     const value = rawValue.trim().length ? Number(rawValue) : undefined;
-    const current = this.state.ranges[filterId] ?? {};
 
+    this.debounce(`range:${filterId}:${key}`, () => {
+      const current = this.state.ranges[filterId] ?? {};
       this.stateChange.emit({
         ...this.state,
         ranges: {
@@ -91,10 +102,13 @@ export class CatalogFiltersPanelComponent {
           }
         }
       });
+    });
   }
 
   updateSlider(filterId: string, value: string): void {
     const numeric = Number(value);
+
+    this.debounce(`slider:${filterId}`, () => {
       this.stateChange.emit({
         ...this.state,
         ranges: {
@@ -105,6 +119,19 @@ export class CatalogFiltersPanelComponent {
           },
         },
       });
+    });
+  }
+
+  /** Debounces range/slider input so full catalog filter recompute doesn't run on every keystroke/drag event. */
+  private debounce(key: string, action: () => void): void {
+    const existing = this.debounceTimers.get(key);
+    if (existing) {
+      clearTimeout(existing);
+    }
+    this.debounceTimers.set(key, setTimeout(() => {
+      this.debounceTimers.delete(key);
+      action();
+    }, RANGE_DEBOUNCE_MS));
   }
 
   updateToggle(filterId: string, checked: boolean): void {