✨ add loader component and service por API calls close #22 #27

src/components/common-styles.scss

@@ -84,6 +84,7 @@ p {
 
 .card {
   width: 80%;
+  margin-top: 24px;
 
   &__container {
     position: relative;
@@ -397,6 +398,8 @@ a:active {
 }
 
 .filter {
+  margin-top: 20px;
+
   @media screen and (max-width: 767px) {
     display: none;
   }

src/components/games/games.component.html

@@ -1,4 +1,6 @@
-<div class="content">
+<app-loader></app-loader>
+
+@if(gamesList){<div class="content">
   <div>
     <div class="side">
       <div class="side__container">
@@ -153,4 +155,4 @@ <h2 class="card__title" [innerHTML]="game.name | highlightText:searchQuery"> {{g
       </button>
     </div>
   </div>
-</div>
+</div>}

src/components/games/games.component.ts

@@ -7,6 +7,7 @@ import {
   ViewChildren,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
 import {
   FormControl,
   FormGroup,
@@ -25,9 +26,11 @@ import { MatSelectChange, MatSelectModule } from '@angular/material/select';
 import { GameCard } from '../commons.models';
 import { FilterFunctionsService } from '../../core/functions/filter/filter-functions.service';
 import { HighlightTextPipe } from '../../core/pipes/highlight-text/highlight-text.pipe';
-import GAMES_JSON from '../../assets/data/games.json';
 import { CommonFunctionsService } from '../../core/functions/common/common-functions.service';
+import { HttpService } from '../../core/services/http/http.service';
 import { ScrollToTopBtnComponent } from '../scroll-to-top-btn/scroll-to-top-btn.component';
+import { LoaderComponent } from '../loader/loader.component';
+import { LoaderService } from '../../core/services/loader/loader.service';
 
 @Component({
   selector: 'app-games',
@@ -36,6 +39,8 @@ import { ScrollToTopBtnComponent } from '../scroll-to-top-btn/scroll-to-top-btn.
     CommonModule,
     FormsModule,
     HighlightTextPipe,
+    HttpClientModule,
+    LoaderComponent,
     MatButtonModule,
     MatCardModule,
     MatChipsModule,
@@ -84,10 +89,29 @@ export class GamesComponent implements OnInit, AfterViewInit {
   constructor(
     public commonFunctions: CommonFunctionsService,
     public filterFunctions: FilterFunctionsService,
+    private httpDataService: HttpService,
+    private loaderService: LoaderService,
   ) {}
 
   ngOnInit(): void {
-    this.gamesList = this.filterFunctions.sortByNameAscending(GAMES_JSON.games);
+    this.gamesList = [];
+    this.loaderService.show();
+    this.httpDataService.getGames().subscribe({
+      next: (response) => {
+        this.gamesList = this.filterFunctions.sortByNameAscending(
+          response.games,
+        );
+        this.filteredGames = this.filterFunctions.sortByNameAscending(
+          response.games,
+        );
+        this.loaderService.hide();
+      },
+      error: (error) => {
+        console.error('Error fetching games data', error);
+        this.loaderService.hide();
+      },
+    });
+
     this.resetGamesList();
     this.types = this.commonFunctions.extractUniqueValues(
       this.gamesList,

src/components/loader/loader.component.html

@@ -0,0 +1,17 @@
+@if(loading)
+{
+<div class="loader__centered">
+  <div class="loader__text">
+    <span class="dot">L</span>
+    <span class="dot">O</span>
+    <span class="dot">A</span>
+    <span class="dot">D</span>
+    <span class="dot">I</span>
+    <span class="dot">N</span>
+    <span class="dot">G</span>
+    <span class="dot">.</span>
+    <span class="dot">.</span>
+    <span class="dot">.</span>
+  </div>
+</div>
+}

src/components/loader/loader.component.scss

@@ -0,0 +1,125 @@
+@import "../../core/styles/variables";
+
+.loader {
+  &__centered {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: calc(100vh - 116px);
+  }
+
+  &__spinner {
+    border: 16px solid $bg-color;
+    border-top: 16px solid $highlight-color;
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+    margin: auto;
+    display: block;
+  }
+
+  &__text {
+    font-size: 38px;
+    color: $highlight-color;
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.dot {
+  opacity: 0;
+}
+
+@keyframes loading-animation {
+  0% {
+    opacity: 0;
+  }
+  9.09% {
+    opacity: 1;
+  }
+  18.18% {
+    opacity: 1;
+  }
+  27.27% {
+    opacity: 1;
+  }
+  36.36% {
+    opacity: 1;
+  }
+  45.45% {
+    opacity: 1;
+  }
+  54.54% {
+    opacity: 1;
+  }
+  63.63% {
+    opacity: 1;
+  }
+  72.72% {
+    opacity: 1;
+  }
+  81.81% {
+    opacity: 1;
+  }
+  90.90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.loader__text .dot {
+  animation: loading-animation 1s steps(1) infinite;
+}
+
+.loader__text .dot:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.loader__text .dot:nth-child(2) {
+  animation-delay: 0.1s;
+}
+
+.loader__text .dot:nth-child(3) {
+  animation-delay: 0.2s;
+}
+
+.loader__text .dot:nth-child(4) {
+  animation-delay: 0.3s;
+}
+
+.loader__text .dot:nth-child(5) {
+  animation-delay: 0.4s;
+}
+
+.loader__text .dot:nth-child(6) {
+  animation-delay: 0.5s;
+}
+
+.loader__text .dot:nth-child(7) {
+  animation-delay: 0.6s;
+}
+
+.loader__text .dot:nth-child(8) {
+  animation-delay: 0.7s;
+}
+
+.loader__text .dot:nth-child(9) {
+  animation-delay: 0.8s;
+}
+
+.loader__text .dot:nth-child(10) {
+  animation-delay: 0.9s;
+}

src/components/loader/loader.component.spec.ts

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

src/components/loader/loader.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { LoaderService } from '../../core/services/loader/loader.service';
+
+@Component({
+  selector: 'app-loader',
+  standalone: true,
+  templateUrl: './loader.component.html',
+  styleUrls: ['./loader.component.scss'],
+})
+export class LoaderComponent implements OnInit {
+  loading: boolean = false;
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private loaderService: LoaderService,
+  ) {}
+
+  ngOnInit(): void {
+    this.loaderService.loading$.subscribe((loading) => {
+      this.loading = loading;
+      this.cdr.detectChanges();
+    });
+  }
+}

src/components/oracles/oracles.component.html

@@ -1,4 +1,7 @@
-<div class="content">
+<app-loader></app-loader>
+
+@if(oraclesList)
+{<div class="content">
   <div>
     <div class="side">
       <div class="side__container">
@@ -21,7 +24,7 @@ <h2 class="card__title" [innerHTML]="oracle.name  | highlightText:searchQuery">
             </h2>
             @if(oracle.image)
             { <div class="card__image-container"><img class="card__image" src="assets/oracles/{{oracle.image}}.webp"
-                alt="{{oracle.name}} image"></div>
+                alt="{{oracle.name}}"></div>
             }
             @if(oracle.artist){
             <h2 class="card__title" [innerHTML]="' by '+
@@ -56,4 +59,4 @@ <h2 class="card__title" [innerHTML]="oracle.name  | highlightText:searchQuery">
       </li>}
     </ul>
   </div>
-</div>
+</div>}

src/components/oracles/oracles.component.ts

@@ -6,18 +6,28 @@ import {
   QueryList,
   ViewChildren,
 } from '@angular/core';
-import ORACLES_JSON from '../../assets/data/oracles.json';
 import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+
 import { HighlightTextPipe } from '../../core/pipes/highlight-text/highlight-text.pipe';
 import { CommonFunctionsService } from '../../core/functions/common/common-functions.service';
 import { FilterFunctionsService } from '../../core/functions/filter/filter-functions.service';
+import { HttpService } from '../../core/services/http/http.service';
 import { ScrollToTopBtnComponent } from '../scroll-to-top-btn/scroll-to-top-btn.component';
 import { OracleCard } from '../commons.models';
+import { LoaderComponent } from '../loader/loader.component';
+import { LoaderService } from '../../core/services/loader/loader.service';
 
 @Component({
   selector: 'app-oracles',
   standalone: true,
-  imports: [CommonModule, HighlightTextPipe, ScrollToTopBtnComponent],
+  imports: [
+    CommonModule,
+    HighlightTextPipe,
+    HttpClientModule,
+    LoaderComponent,
+    ScrollToTopBtnComponent,
+  ],
   templateUrl: './oracles.component.html',
   styleUrl: '../common-styles.scss',
 })
@@ -31,12 +41,25 @@ export class OraclesComponent implements OnInit, AfterViewInit {
   constructor(
     public commonFunctions: CommonFunctionsService,
     public filterFunctions: FilterFunctionsService,
+    private httpDataService: HttpService,
+    private loaderService: LoaderService,
   ) {}
 
   ngOnInit(): void {
-    this.oraclesList = this.filterFunctions.sortByNameAscending(
-      ORACLES_JSON.oracles,
-    );
+    this.oraclesList = [];
+    this.loaderService.show();
+    this.httpDataService.getOracles().subscribe({
+      next: (response) => {
+        this.oraclesList = this.filterFunctions.sortByNameAscending(
+          response.oracles,
+        );
+        this.loaderService.hide();
+      },
+      error: (error) => {
+        console.error('Error fetching oracles data', error);
+        this.loaderService.hide();
+      },
+    });
   }
 
   ngAfterViewInit() {