search: improve performance

src/app/app.component.html

@@ -7,10 +7,14 @@ <h1>NüschtOS Search</h1>
     <feel-text-field [formControl]="search" label="Search"></feel-text-field>
 
     <ul>
-      <li *ngFor="let option of results | async">
-        <a [routerLink]="[]" [queryParams]="{option: option.name}" queryParamsHandling="merge" routerLinkActive="active"><code>{{option.name}}</code></a>
+      <li *ngFor="let option of results | async; trackBy trackBy">
+        <a [routerLink]="[]" [queryParams]="{option: option.name}" queryParamsHandling="merge"
+          routerLinkActive="active">
+          <code>{{option.name}}</code>
+        </a>
       </li>
     </ul>
+    <p>Only showing the first 500 results. Make your search term more concise.</p>
   </div>
 </aside>
 

src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Router, RouterLink, RouterOutlet } from '@angular/router';
-import { SearchService } from './core/search.service';
+import { Option, SearchService } from './core/search.service';
 import { of, switchMap } from 'rxjs';
 import { AsyncPipe, NgFor } from '@angular/common';
 import { TextFieldComponent } from "@feel/form";
@@ -25,7 +25,7 @@ export class AppComponent implements AfterViewInit {
       if (q && q.length > 0) {
         return this.searchService.search(q);
       } else {
-        return of([]);
+        return this.searchService.all();
       }
     }),
   );
@@ -36,10 +36,15 @@ export class AppComponent implements AfterViewInit {
   ) {
   }
 
-  ngAfterViewInit(): void {
+  public ngAfterViewInit(): void {
     this.search.setValue(AppComponent.getQuery());
   }
+
   private static getQuery(): string | null {
     return new URL(location.href).searchParams.get("query");
   }
+
+  protected trackBy(_idx: number, { name }: Option): string {
+    return name;
+  }
 }

src/app/core/search.service.ts

@@ -36,12 +36,41 @@ export class SearchService {
 
   public search(query: string): Observable<Option[]> {
     this.update();
-    return this.data.pipe(map(options => options.filter(option => {
-      return option.name.includes(query)
-    })));
+    return this.data.pipe(map(options => {
+      const result = [];
+      let i = 0;
+      for (const option of options) {
+        if (option.name.includes(query)) {
+          result.push(option);
+          i++;
+          // TODO: pagination
+          if (i === 500) {
+            return result;
+          }
+        }
+      }
+      return result;
+    }));
   }
+
   public getByName(name: string): Observable<Option | undefined> {
     this.update();
     return this.data.pipe(map(options => options.find(option => option.name === name)));
   }
+
+  public all(): Observable<Option[]> {
+    return this.data.pipe(map(options => {
+      const result = [];
+      let i = 0;
+      for (const option of options) {
+        result.push(option);
+        i++;
+        // TODO: pagination
+        if (i === 500) {
+          return result;
+        }
+      }
+      return result;
+    }));
+  }
 }