feat(aio): display “Searching ..." while building search index

closes #15923

aio/src/app/search/search-results/search-results.component.html

@@ -24,5 +24,5 @@
 </ng-template>
 
 <ng-template #notFound>
-  <p>No results found.</p>
+  <p>{{notFoundMessage}}</p>
 </ng-template>

aio/src/app/search/search-results/search-results.component.spec.ts

@@ -129,6 +129,11 @@ describe('SearchResultsComponent', () => {
     expect(component.searchAreas).toEqual([]);
   });
 
+  it('should display "Searching ..." while waiting for search results', () => {
+    fixture.detectChanges();
+    expect(getText()).toContain('Searching ...');
+  });
+
   describe('when a search result anchor is clicked', () => {
     let searchResult: SearchResult;
     let selected: SearchResult;
@@ -179,4 +184,5 @@ describe('SearchResultsComponent', () => {
       expect(getText()).toContain('No results');
     });
   });
+
 });

aio/src/app/search/search-results/search-results.component.ts

@@ -21,6 +21,7 @@ export class SearchResultsComponent implements OnInit, OnDestroy {
 
   private resultsSubscription: Subscription;
   readonly defaultArea = 'other';
+  notFoundMessage = 'Searching ...';
   readonly topLevelFolders = ['guide', 'tutorial'];
 
   /**
@@ -54,6 +55,7 @@ export class SearchResultsComponent implements OnInit, OnDestroy {
 
   // Map the search results into groups by area
   private processSearchResults(search: SearchResults) {
+    this.notFoundMessage = 'No results found.';
     const searchAreaMap = {};
     search.results.forEach(result => {
       if (!result.title) { return; } // bad data; should fix