From 86122471d72329d95a3ac7335d0cfa5d07edf0a4 Mon Sep 17 00:00:00 2001
From: Aziz <119948730+aziz-access@users.noreply.github.com>
Date: Tue, 17 Jan 2023 17:12:19 +0100
Subject: [PATCH] fix(search-results): hide empty result during typing (#1154)

* fix(search-results): hide empty result during typing

* change if condition to show search result component, until the request ended

* resolve lint error

* fix no results display when term is empty

* uncommit toggleTopPanel function

* solve lint error

* fix request delay on first debounce

Co-authored-by: Philippe Lafreniere <philippe.lafreniere@msp.gouv.qc.ca>
---
 .../geo/src/lib/search/search-bar/search-bar.component.ts    | 4 ++--
 .../search-results-tool/search-results-tool.component.html   | 4 ++--
 .../search-results-tool/search-results-tool.component.ts     | 5 ++++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.ts b/packages/geo/src/lib/search/search-bar/search-bar.component.ts
index 942d0afdc9..1554486f33 100644
--- a/packages/geo/src/lib/search/search-bar/search-bar.component.ts
+++ b/packages/geo/src/lib/search/search-bar/search-bar.component.ts
@@ -13,7 +13,7 @@ import {
   FloatLabelType,
   MatFormFieldAppearance
 } from '@angular/material/form-field';
-import { BehaviorSubject, Subscription, EMPTY, timer } from 'rxjs';
+import { BehaviorSubject, Subscription, timer } from 'rxjs';
 import { debounce, distinctUntilChanged } from 'rxjs/operators';
 
 import { LanguageService } from '@igo2/core';
@@ -244,7 +244,7 @@ export class SearchBarComponent implements OnInit, OnDestroy {
 
     this.stream$$ = this.stream$
       .pipe(
-        debounce((term: string) => (term === '' ? EMPTY : timer(this.debounce)))
+        debounce(() => timer(this.debounce))
       )
       .subscribe((term: string) => this.onSetTerm(term));
 
diff --git a/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.html b/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.html
index af8357707c..552195e186 100644
--- a/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.html
+++ b/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="(!store || store.stateView.empty) && (debouncedEmpty$ | async) " style="margin: 10px;">
+<div *ngIf="(!store || store.stateView.empty) && (debouncedEmpty$ | async)" style="margin: 10px;">
   <section class="mat-typography">
     <h4><strong>{{ 'igo.integration.searchResultsTool.noResults' | translate }}</strong></h4>
     <p><strong>{{ 'igo.integration.searchResultsTool.doSearch' | translate }}</strong></p>
@@ -7,7 +7,7 @@ <h4><strong>{{ 'igo.integration.searchResultsTool.noResults' | translate }}</str
 </div>
 
 <igo-flexible
-  *ngIf="store && (store.stateView.empty$ | async)===false"
+  *ngIf="(debouncedEmpty$ | async) === false"
   #topPanel
   initial="100%"
   initialMobile="100%"
diff --git a/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.ts b/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.ts
index a84b5e3254..0aea1f580b 100644
--- a/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.ts
+++ b/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.ts
@@ -164,8 +164,11 @@ export class SearchResultsToolComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.searchTerm$$ = this.searchState.searchTerm$.subscribe(
       (searchTerm: string) => {
-        if (searchTerm !== undefined && searchTerm !== null) {
+        if (searchTerm !== undefined && searchTerm !== null && searchTerm !== '') {
           this.term = searchTerm;
+          this.debouncedEmpty$.next(false);
+        } else if (searchTerm === '') {
+          this.debouncedEmpty$.next(true);
         }
       }
     );