Improve search loading with debounce and loading spinner

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>

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.loading = true;
-        this.results.next(await this.search(query));
+        this.searchChangeDebounce($event);
     }
 
     async search(query): Promise<SearchResult[]> {