feat: search loading

Change-Id: I4e7af36551dcb485a8e3d3a453c7a92a86468a2b

src/web/src/app/modules/search/components/search/search.component.html

@@ -1,20 +1,27 @@
-<app-app-title #$title
-               [hidden]="$title.count === 0"
-               i18n>Searching results for {{ title$ | async }}</app-app-title>
-<app-app-list #$list
-              [appList]="apps$|async"
-              [sortBy]="$title.sortBy"
-              [hidden]="$title.count === 0"
-              (appListLength)="$title.count = $event"></app-app-list>
+<ng-container *ngIf="loaded;else loading">
+  <app-app-title #$title
+                 [hidden]="$title.count === 0"
+                 i18n>Searching results for {{ title$ | async }}</app-app-title>
+  <app-app-list #$list
+                [appList]="apps$|async"
+                [sortBy]="$title.sortBy"
+                [hidden]="$title.count === 0"
+                (appListLength)="$title.count = $event"></app-app-list>
 
-<ng-container *ngIf="$title.count === 0">
-  <div class="searchEmpty">
-    <img class="tips_bg" /> <span i18n>Sorry</span>
-    <div class="gray-text"
-         i18n>No search results found</div>
+  <ng-container *ngIf="$title.count === 0">
+    <div class="searchEmpty">
+      <img class="tips_bg" /> <span i18n>Sorry</span>
+      <div class="gray-text"
+           i18n>No search results found</div>
 
-    <div class="gray-text"
-         i18n>Welcome to <a class="recommend"
-         (click)="recommend()">recommend</a> this application</div>
-  </div>
-</ng-container>
+      <div class="gray-text"
+           i18n>Welcome to <a class="recommend"
+           (click)="recommend()">recommend</a> this application</div>
+    </div>
+  </ng-container>
+</ng-container>
+
+<div class="loadingContainer"
+     #loading>
+  <app-wait></app-wait>
+</div>

src/web/src/app/modules/search/components/search/search.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
-import { map, flatMap, switchMap } from 'rxjs/operators';
+import { map, flatMap, switchMap, tap } from 'rxjs/operators';
 import { truncate } from 'lodash';
 
 import { App, AppService } from 'app/services/app.service';
@@ -22,6 +22,7 @@ export class SearchComponent implements OnInit {
   keyword$: Observable<string>;
   title$: Observable<string>;
   apps$: Observable<App[]>;
+  loaded = false;
 
   ngOnInit() {
     this.title$ = this.route.queryParamMap.pipe(
@@ -30,9 +31,13 @@ export class SearchComponent implements OnInit {
 
     this.apps$ = this.route.queryParamMap.pipe(
       switchMap(param => {
+        this.loaded = false;
         const appNameList = param.getAll('apps');
         return this.appService.getApps(appNameList);
       }),
+      tap(() => {
+        this.loaded = true;
+      }),
     );
   }