Improve skeleton delay

ls1intum · Oct 1, 2024 · 79c41b9 · 79c41b9
1 parent 0f71666
commit 79c41b9
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/webapp/src/app/home/home.component.html b/webapp/src/app/home/home.component.html
@@ -4,7 +4,7 @@ <h1 class="text-3xl font-bold mb-4">Artemis Leaderboard</h1>
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 place-content-center">
     <app-leaderboard-filter [after]="after()" [before]="before()" />
     <div class="md:col-span-2 flex flex-col items-center gap-4">
-      @if (query.isPending()) {
+      @if (query.isPending() && !query.data()) {
         <app-skeleton class="w-full h-96"></app-skeleton>
       } @else if (query.error()) {
         <span class="text-xl text-destructive mt-2">An error has occurred</span>

diff --git a/webapp/src/app/home/home.component.ts b/webapp/src/app/home/home.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { injectQuery } from '@tanstack/angular-query-experimental';
 import { LeaderboardService } from 'app/core/modules/openapi/api/leaderboard.service';
 import { LeaderboardComponent } from 'app/home/leaderboard/leaderboard.component';
-import { delay, lastValueFrom } from 'rxjs';
+import { combineLatest, timer, lastValueFrom, map } from 'rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { LeaderboardFilterComponent } from './leaderboard/filter/filter.component';
 import { SkeletonComponent } from 'app/ui/skeleton/skeleton.component';
@@ -26,6 +26,6 @@ export class HomeComponent {
 
   query = injectQuery(() => ({
     queryKey: ['leaderboard', { after: this.after(), before: this.before() }],
-    queryFn: async () => lastValueFrom(this.leaderboardService.getLeaderboard(this.after(), this.before()).pipe(delay(1000)))
+    queryFn: async () => lastValueFrom(combineLatest([this.leaderboardService.getLeaderboard(this.after(), this.before()), timer(500)]).pipe(map(([leaderboard]) => leaderboard)))
   }));
 }