Added Loading Spinner to highscores #32

KEB-Deutschland-e-V · Oct 17, 2023 · 234004c · 234004c
1 parent f617808
commit 234004c
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 1 deletion.
diff --git a/src/app/changelog/changelog.component.ts b/src/app/changelog/changelog.component.ts
@@ -7,6 +7,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ChangelogComponent implements OnInit {
   changes = [
+    "1.0.47;Ladebalken wird nun angezeigt, wenn Highscores noch nicht geladen wurden",
     "1.0.46;Die Eingabe von Namen wurde auf 20 Zeichen beschränkt;Highscorese können nicht mehr mehrfach abgesendet werden;Leere Namen können nicht mehr eingetragen werden",
     "1.0.45;Es wird das Datum bei den Highscores angezeigt",
     "1.0.44;Es werden nun alle Highscores angezeigt, nicht nur die Top Ten.",

diff --git a/src/app/highscores/highscores.component.html b/src/app/highscores/highscores.component.html
@@ -1,5 +1,8 @@
 <h1>HighScores</h1>
 <button mat-raised-button color="primary" [routerLink]="['/spiel']" class="start-button">Spielen!</button>
+<br/>
+<div id="loading" *ngIf="loading"></div>
+<br/>
 <mat-list>
   <mat-list-item *ngFor="let score of highscores; index as i">
     <strong>{{i+1}}</strong>
@@ -8,4 +11,4 @@ <h1>HighScores</h1>
     <em>{{score.score}}</em>
   </mat-list-item>
 </mat-list>
-<button mat-raised-button color="primary" [routerLink]="['/spiel']" class="start-button">Spielen!</button>
+<button mat-raised-button color="primary" [routerLink]="['/spiel']" class="start-button" *ngIf="!loading">Spielen!</button>
diff --git a/src/app/highscores/highscores.component.scss b/src/app/highscores/highscores.component.scss
@@ -26,4 +26,23 @@ em {
 .start-button {
   font-size: xx-large;
   padding: 20px;
+}
+
+#loading {
+  display: inline-block;
+  margin: 20px;
+  width: 50px;
+  height: 50px;
+  border: 8px solid #9b1430;
+  border-radius: 50%;
+  border-top-color: #fff;
+  animation: spin 1s ease-in-out infinite;
+  -webkit-animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
 }
diff --git a/src/app/highscores/highscores.component.ts b/src/app/highscores/highscores.component.ts
@@ -13,15 +13,18 @@ export class HighscoresComponent implements OnInit {
   difficulties: Difficulty[] = [];
   highscores: Highscore[] = [];
   diffWithScores: any = [];
+  loading: boolean = true;
   constructor(
     private backend: BackendService,
     private highscoreService: HighscoreService,
     private bgm: BgmService
     ) {
+    this.loading = true;
     this.difficulties = this.backend.getDifficulties();
     this.highscoreService.getHighscores().subscribe((data: any) => {
       this.highscores = data;
       this.highscores.sort((a,b) => (a.score < b.score) ? 1 : ((b.score < a.score) ? -1 : 0))
+      this.loading = false;
       console.log(this.highscores)
     });
   }