end friend component

src/app/components/friend-page/friend-page.component.html

@@ -52,7 +52,7 @@
         class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white"
         placeholder="Rechercher un ami..."
         [(ngModel)]="searchTerm"
-        (ngModelChange)="searchUser($event)"
+        (ngModelChange)="onSearchTermChange($event)"
       />
 
       <div *ngIf="listUser" class="text-gray-500 text-sm">

src/app/components/friend-page/friend-page.component.ts

@@ -4,6 +4,7 @@ import { FriendsService } from '../../services/friends/friends.service';
 import { FormsModule, NgModel } from '@angular/forms';
 import { UserService } from '../../services/user/user.service';
 import { LocalStorageService } from '../../services/local-storage/local-storage.service';
+import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
 
 @Component({
   selector: 'app-friend-page',
@@ -29,11 +30,23 @@ export class FriendPageComponent implements OnInit {
   hasAcceptedFriends: boolean = false;
   hasPendingFriends: boolean = false;;  
   searchTerm: string = '';
+  searchTermChanged = new Subject<string>();
 
-  constructor(private friendService: FriendsService, private userService:UserService, private localStorage: LocalStorageService) {}
+
+  constructor(private friendService: FriendsService, private userService:UserService, private localStorage: LocalStorageService) {
+
+  }
 
   ngOnInit(): void {
     this.getFriendData();
+    this.searchTermChanged
+    .pipe(
+      debounceTime(200),
+      distinctUntilChanged()
+    )
+    .subscribe((username: string) => {
+      this.searchUser(username);
+    });
   }
   
   protected searchUser(username: string) {
@@ -46,6 +59,20 @@ export class FriendPageComponent implements OnInit {
     }
   }
 
+  onSearchTermChange(username: string) {
+    this.searchTermChanged.next(username);
+  }
+
+  private getUserData(search:string): void{
+    const username = this.localStorage.getUsername()
+    this.userService.getUser('^(?!'+username+')'+search).subscribe((data:any[]) => {
+      if (data.length > 0) {
+        const existingFriendIds = this.listFriend.map(friend => friend.friend_user_id);
+        this.listUser = data.filter(user => !existingFriendIds.includes(user.uid));
+      } 
+    })
+  }
+
   protected addUser(user_id:string): void {
     this.friendService.addFriend(user_id).subscribe((data:any) => {
       if(data.id){
@@ -59,16 +86,6 @@ export class FriendPageComponent implements OnInit {
     })
   }
 
-  private getUserData(search:string): void{
-    const username = this.localStorage.getUsername()
-    this.userService.getUser('^(?!'+username+')'+search).subscribe((data:any[]) => {
-      if (data.length > 0) {
-        const existingFriendIds = this.listFriend.map(friend => friend.friend_user_id);
-        this.listUser = data.filter(user => !existingFriendIds.includes(user.uid));
-      } 
-    })
-  }
-
   private getFriendData(): void {
     this.friendService.getFriend().subscribe((data: any[]) => {
       if (data.length > 0) {