Merge pull request #24 from hurry-harry/hf-loading-spinner

Add LoadingSpinner component

src/app/_shared/components/loading-spinner/loading-spinner/loading-spinner.component.html

@@ -0,0 +1,6 @@
+
+<div class="d-flex justify-content-center spinner-icon">
+  <div class="spinner-border" role="status">
+    <span class="sr-only"></span>
+  </div>
+</div>

src/app/_shared/components/loading-spinner/loading-spinner/loading-spinner.component.scss

@@ -0,0 +1,19 @@
+.spinner-icon {
+  padding-top: 20%;
+}
+
+.spinner-icon  .spinner-border {
+  border: 16px solid #fff; /* Light grey */
+  border-top: 16px solid #1976d2; /* Blue */
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
+  -webkit-animation: spin 2s linear infinite;
+      -ms-animation: spin 2s linear infinite;
+         animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

src/app/_shared/components/loading-spinner/loading-spinner/loading-spinner.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoadingSpinnerComponent } from './loading-spinner.component';
+
+describe('LoadingSpinnerComponent', () => {
+  let component: LoadingSpinnerComponent;
+  let fixture: ComponentFixture<LoadingSpinnerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoadingSpinnerComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoadingSpinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_shared/components/loading-spinner/loading-spinner/loading-spinner.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-loading-spinner',
+  standalone: true,
+  imports: [],
+  templateUrl: './loading-spinner.component.html',
+  styleUrl: './loading-spinner.component.scss'
+})
+export class LoadingSpinnerComponent {
+
+}

src/app/_shared/interceptors/spotify-auth.interceptor.ts

@@ -25,22 +25,17 @@ export class SpotifyAuthInterceptor implements HttpInterceptor {
       this.authService.isLoggedIn()
         .subscribe({
           next: (response: boolean) => {
-            console.log('authInterceptor isloggedin next', response);
             if (response) {
               const url = window.location.pathname;
-              console.log('auth pathname');
               this.router.navigateByUrl('./loading', { skipLocationChange: true }).then(() => {
                 this.router.navigateByUrl(url);
               }); 
             }
             else 
               this.authService.authError(null);
           },
-          complete: () => {
-            console.log('authInterceptor isloggedin complete');
-          },
+          complete: () => { },
           error: (error) => {
-            console.log('authInterceptor isloggedin error', error);
             this.authService.authError(error);
           }
         });

src/app/_shared/services/authentication.service.ts

@@ -91,8 +91,6 @@ export class AuthenticationService {
           localStorage.setItem('refresh_token', response.refresh_token);
           this.userService.spotifyTokenDetailsSignal.set(response);
 
-          console.log('concatmap');
-
           return this.spotifyService.getUserProfile(this.userService.spotifyTokenDetailsSignal().access_token);
         })
       ).subscribe({
@@ -103,7 +101,6 @@ export class AuthenticationService {
           isSuccess.next(true);
         },
         error: (error) => {
-          console.log('Spotify AccessTokenError', error);
           isSuccess.next(false);
         }
       });
@@ -141,25 +138,19 @@ export class AuthenticationService {
   }
 
   isLoggedIn(): Observable<boolean> {
-    console.log('isloggedin check');
     let isSuccess: Subject<boolean> = new Subject<boolean>();
 
     if (this.userService.userSignal().id && this.userService.spotifyTokenDetailsSignal().access_token) {
       isSuccess.next(true);
-      console.log('islogged in');
     }
     else if (localStorage.getItem('refresh_token')) {
-      console.log('refresh token');
       return this.getAccessToken(true, "", "");
     }
 
     return isSuccess.asObservable();
   }
 
   authError(error: Error | null): void {
-    if (error)
-      console.log('Spotify AuthError', error);
-
     this.router.navigate(['']);
   }
 

src/app/components/callback/callback/callback.component.ts

@@ -38,7 +38,6 @@ export class CallbackComponent implements OnInit {
     if (code && codeVerifier && isStateValid) {
       this.authService.getAccessToken(false, code, codeVerifier)
         .subscribe((response: boolean) => {
-          console.log('callback getaccesstoken', response);
           this.router.navigate(['./home']);
         });
     } else if (error || !codeVerifier) {

src/app/components/home/home.component.ts

@@ -36,17 +36,11 @@ export class HomeComponent implements OnInit {
 
   ngOnInit(): void {
     // const isLoggedIn = this.authService.isLoggedIn();
-    console.log('home init');
     this.authService.isLoggedIn()
       .subscribe({
-        next: (response: boolean) => {
-          console.log('home isloggedin next', response);
-        },
-        complete: () => {
-          console.log('home isloggedin complete');
-        },
+        next: (response: boolean) => { },
+        complete: () => { },
         error: (error) => {
-          console.log('home isloggedin error', error);
           this.authService.authError(error);
         }
       });

src/app/components/play/play.component.html

@@ -1,6 +1,6 @@
 <div class="play-container">
   @if (isLoading) {
-    loading...
+    <app-loading-spinner></app-loading-spinner>
   } @else {
     @if (isPlaying) {
       <ng-template *ngTemplateOutlet="playMode"></ng-template>

src/app/components/play/play.component.ts

@@ -12,11 +12,12 @@ import { QuizResult } from '../../_shared/models/result-modal.model';
 import { QuizAnswerModal } from '../../_shared/components/modals/quiz-answer/quiz-answer.modal';
 import { NgbModal, NgbModalModule, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { NavigationStart, Router } from '@angular/router';
+import { LoadingSpinnerComponent } from '../../_shared/components/loading-spinner/loading-spinner/loading-spinner.component';
 
 @Component({
   selector: 'app-play',
   standalone: true,
-  imports: [NgSelectModule, CommonModule, FormsModule, NgbModalModule],
+  imports: [NgSelectModule, CommonModule, FormsModule, NgbModalModule, LoadingSpinnerComponent],
   templateUrl: './play.component.html',
   styleUrl: './play.component.scss'
 })

src/app/components/stats/stats.component.html

@@ -25,7 +25,7 @@ <h1>Your Music Favorites</h1>
     }
   } @else {
     <div>
-      Loading...
+      <app-loading-spinner></app-loading-spinner>
     </div>
   }
 </div>

src/app/components/stats/stats.component.ts

@@ -6,11 +6,12 @@ import { concatMap, finalize } from 'rxjs';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { SingleEpPipe } from '../../_shared/pipes/single-ep.pipe';
+import { LoadingSpinnerComponent } from '../../_shared/components/loading-spinner/loading-spinner/loading-spinner.component';
 
 @Component({
   selector: 'app-stats',
   standalone: true,
-  imports: [ CommonModule, FormsModule, SingleEpPipe ],
+  imports: [ CommonModule, FormsModule, SingleEpPipe, LoadingSpinnerComponent ],
   templateUrl: './stats.component.html',
   styleUrl: './stats.component.scss'
 })
@@ -48,7 +49,6 @@ export class StatsComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    console.log('stats init');
     this.updateTopItems();
   }
 

src/styles.scss

@@ -201,4 +201,14 @@ input:checked + .slider:before {
 
 .audio-stroke:nth-child(11) {
   animation-delay: random($limit: null)+s;
+}
+
+app-loading-spinner {
+  // position: fixed;
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  top:0;
+  background: darkgray;
+  opacity: 0.5;
 }