Noded/frontend
3
0
Fork 0
Code Issues 47 Pull Requests Releases Wiki Activity

Improve search loading with debounce and loading spinner
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Garrett Mills 2020-12-23 20:37:08 -06:00
parent 37468489fb
commit bbb727bd38
Signed by: garrettmills
GPG Key ID: D2BF5FBA8298F246
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/components/search/Search.component.html
View File

@ -9,7 +9,7 @@
></ion-input> ></ion-input>
</ion-header> </ion-header>
<div class="search-results" style="height: 100%; overflow-y: scroll;"> <div class="search-results" style="height: 100%; overflow-y: scroll;">
<ion-list> <ion-list *ngIf="!loading">
<ion-item <ion-item
*ngFor="let result of (results | async)" *ngFor="let result of (results | async)"
button button
@ -32,5 +32,8 @@
</div> </div>
</ion-item> </ion-item>
</ion-list> </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>
</div> </div>

12
src/app/components/search/Search.component.ts
View File

@ -4,6 +4,7 @@ import {ApiService} from '../../service/api.service';
import {BehaviorSubject} from 'rxjs'; import {BehaviorSubject} from 'rxjs';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
import {NodeTypeIcons} from '../../structures/node-types'; import {NodeTypeIcons} from '../../structures/node-types';
import {debounce} from "../../utility";
export interface SearchResult { export interface SearchResult {
title: string; title: string;
@ -26,9 +27,16 @@ export class SearchComponent implements OnInit {
@ViewChild('ionInput') ionInput: IonInput; @ViewChild('ionInput') ionInput: IonInput;
@Input() query = ''; @Input() query = '';
public results: BehaviorSubject<SearchResult[]> = new BehaviorSubject<SearchResult[]>([]); public results: BehaviorSubject<SearchResult[]> = new BehaviorSubject<SearchResult[]>([]);
public loading = false;
public typeIcons = NodeTypeIcons; 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( constructor(
protected modal: ModalController, protected modal: ModalController,
protected api: ApiService, protected api: ApiService,
@ -46,8 +54,8 @@ export class SearchComponent implements OnInit {
} }
async onSearchChange($event) { 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[]> { async search(query): Promise<SearchResult[]> {