From bbb727bd380a3955967aa84d851c22f76082bd53 Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Wed, 23 Dec 2020 20:37:08 -0600
Subject: [PATCH] Improve search loading with debounce and loading spinner

---
 src/app/components/search/Search.component.html |  5 ++++-
 src/app/components/search/Search.component.ts   | 12 ++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/app/components/search/Search.component.html b/src/app/components/search/Search.component.html
index 832c8b8..c60b8be 100644
--- a/src/app/components/search/Search.component.html
+++ b/src/app/components/search/Search.component.html
@@ -9,7 +9,7 @@
         ></ion-input>
     </ion-header>
     <div class="search-results" style="height: 100%; overflow-y: scroll;">
-        <ion-list>
+        <ion-list *ngIf="!loading">
             <ion-item
                 *ngFor="let result of (results | async)"
                 button
@@ -32,5 +32,8 @@
                 </div>
             </ion-item>
         </ion-list>
+        <div class="loading-container" style="margin-top: 40px; text-align: center" *ngIf="loading">
+            <i class="fa fa-spinner fa-spin" style="color: #cccccc; font-size: 56pt;"></i>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/search/Search.component.ts b/src/app/components/search/Search.component.ts
index 93d1d8b..1c67a0c 100644
--- a/src/app/components/search/Search.component.ts
+++ b/src/app/components/search/Search.component.ts
@@ -4,6 +4,7 @@ import {ApiService} from '../../service/api.service';
 import {BehaviorSubject} from 'rxjs';
 import {Router} from '@angular/router';
 import {NodeTypeIcons} from '../../structures/node-types';
+import {debounce} from "../../utility";
 
 export interface SearchResult {
     title: string;
@@ -26,9 +27,16 @@ export class SearchComponent implements OnInit {
     @ViewChild('ionInput') ionInput: IonInput;
     @Input() query = '';
     public results: BehaviorSubject<SearchResult[]> = new BehaviorSubject<SearchResult[]>([]);
+    public loading = false;
 
     public typeIcons = NodeTypeIcons;
 
+    protected searchChangeDebounce = debounce(async ($event) => {
+        const query = $event.detail.value;
+        this.results.next(await this.search(query));
+        this.loading = false;
+    }, 1000);
+
     constructor(
         protected modal: ModalController,
         protected api: ApiService,
@@ -46,8 +54,8 @@ export class SearchComponent implements OnInit {
     }
 
     async onSearchChange($event) {
-        const query = $event.detail.value;
-        this.results.next(await this.search(query));
+        this.loading = true;
+        this.searchChangeDebounce($event);
     }
 
     async search(query): Promise<SearchResult[]> {