From 1b7b4259f4b53537704b0cb5c951432ec08a46ab Mon Sep 17 00:00:00 2001
From: bisco <bisco@younerd.org>
Date: Wed, 3 Jun 2026 22:56:13 +0200
Subject: [PATCH] fix: make scouting filters immediate and loading state
 precise

---
 frontend/src/app/app.component.html    | 30 ++++++++++++++++++++-----
 frontend/src/app/app.component.spec.ts | 31 ++++++++++++++++++++++++++
 frontend/src/app/app.component.ts      | 20 ++++++++++++-----
 3 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index bc2e67a..bcae520 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -82,27 +82,45 @@
   </section>
 
   <section class="quickbar" aria-label="Quick filters">
-    <div class="chip-group">
+    <div class="chip-group" aria-label="Position quick filter">
+      <button
+        type="button"
+        [class.active]="filters.position === ''"
+        [attr.aria-pressed]="filters.position === ''"
+        (click)="setPosition('')"
+      >
+        All positions
+      </button>
       <button
         *ngFor="let position of positions"
         type="button"
         [class.active]="filters.position === position"
-        (click)="togglePosition(position)"
+        [attr.aria-pressed]="filters.position === position"
+        (click)="setPosition(position)"
       >
         {{ position }}
       </button>
     </div>
-    <div class="chip-group league-chips">
+    <div class="chip-group league-chips" aria-label="League quick filter">
+      <button
+        type="button"
+        [class.active]="filters.league === ''"
+        [attr.aria-pressed]="filters.league === ''"
+        (click)="setLeague('')"
+      >
+        All leagues
+      </button>
       <button
         *ngFor="let league of leagues"
         type="button"
         [class.active]="filters.league === league"
-        (click)="toggleLeague(league)"
+        [attr.aria-pressed]="filters.league === league"
+        (click)="setLeague(league)"
       >
         {{ league }}
       </button>
     </div>
-    <span class="filter-count">{{ activeFiltersCount }} active</span>
+    <span class="filter-count">{{ isUpdatingResults ? 'Updating...' : activeFiltersCount + ' active' }}</span>
   </section>
 
   <p *ngIf="errorMessage" class="alert">{{ errorMessage }}</p>
@@ -151,7 +169,7 @@
         </tbody>
       </table>
       <div *ngIf="!loading && players.length === 0" class="empty">No players match the current filters.</div>
-      <div *ngIf="loading" class="empty">Loading scouting board...</div>
+      <div *ngIf="showLoadingPlaceholder" class="empty">Loading scouting board...</div>
     </div>
 
     <aside class="detail" *ngIf="selectedPlayer">
diff --git a/frontend/src/app/app.component.spec.ts b/frontend/src/app/app.component.spec.ts
index ad57baf..a161ec1 100644
--- a/frontend/src/app/app.component.spec.ts
+++ b/frontend/src/app/app.component.spec.ts
@@ -89,6 +89,37 @@ describe('AppComponent', () => {
     assert.equal(calls, 1);
   });
 
+  it('applies quick filters immediately and can clear them with all controls', () => {
+    const requestedPositions: string[] = [];
+    const api = {
+      searchPlayers: (filters: { position: string; league: string }) => {
+        requestedPositions.push(`${filters.position}:${filters.league}`);
+        return of({ count: 0, results: [] });
+      },
+    } as unknown as PlayerApiService;
+    const component = new AppComponent(api);
+
+    component.setPosition('PG');
+    component.setLeague('LBA');
+    component.setPosition('');
+    component.setLeague('');
+
+    assert.deepEqual(requestedPositions, ['PG:', 'PG:LBA', ':LBA', ':']);
+  });
+
+  it('shows the loading placeholder only before results exist', () => {
+    const api = {
+      searchPlayers: () => of({ count: samplePlayers.length, results: samplePlayers }),
+    } as unknown as PlayerApiService;
+    const component = new AppComponent(api);
+
+    component.loading = true;
+    assert.equal(component.showLoadingPlaceholder, true);
+
+    component.players = samplePlayers;
+    assert.equal(component.showLoadingPlaceholder, false);
+  });
+
   it('sorts the visible scouting board by selected stat', () => {
     const api = {
       searchPlayers: () => of({ count: samplePlayers.length, results: samplePlayers }),
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 25942e4..3e6b74a 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -95,14 +95,14 @@ export class AppComponent {
     this.search();
   }
 
-  togglePosition(position: string): void {
-    this.filters.position = this.filters.position === position ? '' : position;
-    this.onFilterChange();
+  setPosition(position: string): void {
+    this.filters.position = position;
+    this.search();
   }
 
-  toggleLeague(league: string): void {
-    this.filters.league = this.filters.league === league ? '' : league;
-    this.onFilterChange();
+  setLeague(league: string): void {
+    this.filters.league = league;
+    this.search();
   }
 
   sortBy(key: SortKey): void {
@@ -153,6 +153,14 @@ export class AppComponent {
     ].filter((value) => value !== null && String(value).trim().length > 0).length;
   }
 
+  get showLoadingPlaceholder(): boolean {
+    return this.loading && this.players.length === 0;
+  }
+
+  get isUpdatingResults(): boolean {
+    return this.loading && this.players.length > 0;
+  }
+
   private sortPlayers(players: PlayerSummary[]): PlayerSummary[] {
     return [...players].sort((a, b) => this.numericStat(b, this.activeSort) - this.numericStat(a, this.activeSort));
   }