pushes search text to a subject (#14880)

use distinctUntilChanged to prevent duplicate filtering operations

Run filtering outside angular zone to prevent change detection issues

apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, NgZone } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormsModule } from "@angular/forms";
-import { Subject, Subscription, debounceTime, filter } from "rxjs";
+import { Subject, Subscription, debounceTime, distinctUntilChanged, filter } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { SearchModule } from "@bitwarden/components";
@@ -22,13 +22,16 @@ export class VaultV2SearchComponent {
 
   private searchText$ = new Subject<string>();
 
-  constructor(private vaultPopupItemsService: VaultPopupItemsService) {
+  constructor(
+    private vaultPopupItemsService: VaultPopupItemsService,
+    private ngZone: NgZone,
+  ) {
     this.subscribeToLatestSearchText();
     this.subscribeToApplyFilter();
   }
 
   onSearchTextChanged() {
-    this.vaultPopupItemsService.applyFilter(this.searchText);
+    this.searchText$.next(this.searchText);
   }
 
   subscribeToLatestSearchText(): Subscription {
@@ -44,9 +47,13 @@ export class VaultV2SearchComponent {
 
   subscribeToApplyFilter(): Subscription {
     return this.searchText$
-      .pipe(debounceTime(SearchTextDebounceInterval), takeUntilDestroyed())
+      .pipe(debounceTime(SearchTextDebounceInterval), distinctUntilChanged(), takeUntilDestroyed())
       .subscribe((data) => {
-        this.vaultPopupItemsService.applyFilter(data);
+        this.ngZone.runOutsideAngular(() => {
+          this.ngZone.run(() => {
+            this.vaultPopupItemsService.applyFilter(data);
+          });
+        });
       });
   }
 }