search busy animation

This commit is contained in:
Jonas Winkler 2020-11-02 01:35:09 +01:00
parent baddc220d6
commit 5e3d05322e
3 changed files with 10 additions and 0 deletions

View File

@ -8,4 +8,8 @@
height: 100%;
position: absolute;
}
.result-content-searching {
opacity: 0.2;
}

View File

@ -3,10 +3,12 @@
<p>Search string: <i>{{query}}</i></p>
<div [class.result-content-searching]="searching">
<app-document-card-large *ngFor="let result of results"
[document]="result.document"
[details]="result.highlights">
</app-document-card-large>
</div>
<p *ngIf="results.length == 0" class="mx-auto">No results</p>

View File

@ -13,13 +13,17 @@ export class SearchComponent implements OnInit {
query: string = ""
searching = false
constructor(private searchService: SearchService, private route: ActivatedRoute) { }
ngOnInit(): void {
this.route.queryParamMap.subscribe(paramMap => {
this.query = paramMap.get('query')
this.searching = true
this.searchService.search(this.query).subscribe(result => {
this.results = result
this.searching = false
})
})