search: improve performance

demo/flake.nix

@@ -15,6 +15,7 @@
       inputs = {
         nixpkgs.follows = "nixpkgs";
         search.follows = "search";
+        flake-utils.follows = "flake-utils";
       };
     };
     nixvim = {

nix/frontend.nix

@@ -14,7 +14,7 @@ stdenv.mkDerivation (finalAttrs: {
 
   pnpmDeps = pnpm_8.fetchDeps {
     inherit (finalAttrs) pname version src;
-    hash = "sha256-0t9qJ2Cgq2mbiVnFbd61knlzdqQ68RIIW+toa21h8NU=";
+    hash = "sha256-ETUP7CJeKX30nDZk+hWxO84V4P25/cn3fZiXeTT0bAI=";
   };
 
   nativeBuildInputs = [ nodejs pnpm_8.configHook ];

package.json

@@ -32,6 +32,7 @@
     "@angular-devkit/build-angular": "^18.0.5",
     "@angular/cli": "^18.0.5",
     "@angular/compiler-cli": "^18.0.0",
+    "@angular/language-service": "^18.0.5",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",

src/app/app.component.html

@@ -6,11 +6,17 @@ <h1>NüschtOS Search</h1>
   <div class="card">
     <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>
-    </ul>
+    <ng-container *ngIf="(results | async) as options">
+      <ul>
+        <li *ngFor="let option of options; trackBy trackBy">
+          <a [routerLink]="[]" [queryParams]="{option: option.name}" queryParamsHandling="merge"
+            routerLinkActive="active">
+            <code>{{option.name}}</code>
+          </a>
+        </li>
+      </ul>
+      <p *ngIf="options.length == 500">Only showing the first 500 results. Make your search term more concise.</p>
+    </ng-container>
   </div>
 </aside>
 

src/app/app.component.scss

@@ -26,11 +26,6 @@
 
     li {
       list-style-type:none;
-/*      display: block;
-
-      &:not(:first-child) {
-        border-top: 0.1rem solid $c-secondary-l;
-      }*/
 
       a {
         display: block;

src/app/app.component.ts

@@ -1,16 +1,16 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Router, RouterLink, RouterOutlet } from '@angular/router';
-import { SearchService } from './core/search.service';
-import { of, switchMap } from 'rxjs';
-import { AsyncPipe, NgFor } from '@angular/common';
+import { Option, SearchService } from './core/search.service';
+import { switchMap } from 'rxjs';
+import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import { TextFieldComponent } from "@feel/form";
 import { OptionComponent } from './pages/option/option.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, AsyncPipe, NgFor, ReactiveFormsModule, TextFieldComponent, RouterLink, OptionComponent],
+  imports: [RouterOutlet, AsyncPipe, NgFor, ReactiveFormsModule, TextFieldComponent, RouterLink, OptionComponent, NgIf],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -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;
+    }));
+  }
 }