search busy animation

src-ui/src/app/components/search/search.component.css

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

src-ui/src/app/components/search/search.component.html

@@ -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>

src-ui/src/app/components/search/search.component.ts

@@ -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
       })
     })