feat: new loader and loaderService (#172)

* feat: implement laoder component and loader service

* fix: margin-top for the roadmap

frontend/src/app/app.component.html

@@ -1,3 +1,4 @@
 <router-outlet></router-outlet>
-
+<!--TODO: set visible for the laoding progress-->
+<app-loader *ngIf="isLoading" ></app-loader>
 <app-toast></app-toast>

frontend/src/app/app.component.ts

@@ -1,10 +1,22 @@
 import { Component } from '@angular/core';
+import { OnInit } from '@angular/core';
+import { LoaderService } from './services/loader.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
-export class AppComponent {
+export class AppComponent implements OnInit{
   title = 'duogradus. | Sammle Schritte, Tritt gegen Freunde an und steig in der Liga auf';
+  isLoading: boolean = false;
+  constructor(private loaderService: LoaderService) {
+
+  }
+
+  ngOnInit(): void {
+     this.loaderService.isLoading.subscribe((value) => {
+      this.isLoading = value;
+    });
+  }
 }

frontend/src/app/components/atoms/loader/loader.component.html

@@ -1,2 +1,7 @@
-
-<span class="loader"></span>
+<div class="center-container">
+    <div class="main">
+        <span class="loader">
+            <img src="../../../../assets/logo/logo_1_white.svg">
+        </span>
+    </div>
+</div>

frontend/src/app/components/atoms/loader/loader.component.scss

@@ -1,51 +1,50 @@
-.loader {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  display: block;
-  margin: 15px auto;
-  position: relative;
-  color: #fff;
-  left: -100px;
-  box-sizing: border-box;
-  animation: shadowRolling 2s linear infinite;
-}
 
-@keyframes shadowRolling {
-  0% {
-    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
-      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
-  }
-  12% {
-    box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0),
-      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
-  }
-  25% {
-    box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0),
-      0px 0 rgba(255, 255, 255, 0);
-  }
-  36% {
-    box-shadow: 120px 0 white, 110px 0 white, 100px 0 white,
-      0px 0 rgba(255, 255, 255, 0);
-  }
-  50% {
-    box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
-  }
-  62% {
-    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white,
-      110px 0 white;
-  }
-  75% {
-    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
-      130px 0 white, 120px 0 white;
-  }
-  87% {
-    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
-      200px 0 rgba(255, 255, 255, 0), 130px 0 white;
-  }
-  100% {
-    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
-      200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
-  }
-}
 
+.center-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+
+  .main
+  {
+    position: absolute;
+    z-index: 5;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    max-width: 428px;
+    background-color: var(--background-black);
+    margin: 0;
+    padding: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .loader {
+      position: relative;
+      width: 100px;
+      height: 100px;
+    }
+
+    .loader:before , .loader:after{
+      content: '';
+      border-radius: 50%;
+      position: absolute;
+      inset: 0;
+      box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
+    }
+    .loader:after {
+      box-shadow: 0 2px 0 var(--green) inset;
+      animation: rotate 2s linear infinite;
+    }
+
+    @keyframes rotate {
+      0% {  transform: rotate(0)}
+      100% { transform: rotate(360deg)}
+    }
+  }
+}

frontend/src/app/components/atoms/loader/loader.component.ts

@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
 
+
 @Component({
   selector: 'app-loader',
   templateUrl: './loader.component.html',
   styleUrl: './loader.component.scss',
 })
-export class LoaderComponent {}
+export class LoaderComponent{
+
+}

frontend/src/app/components/organisms/ranking-table/ranking-table.component.spec.ts

@@ -1,14 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { RankingTableComponent } from './ranking-table.component';
+import { UserCardComponent } from 'app/components/atoms/user-card/user-card.component';
 
 describe('RankingTableComponent', () => {
   let component: RankingTableComponent;
   let fixture: ComponentFixture<RankingTableComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [RankingTableComponent]
+      declarations: [RankingTableComponent, UserCardComponent]
     })
     .compileComponents();
 

frontend/src/app/components/organisms/roadmap/roadmap.component.scss

@@ -1,5 +1,5 @@
 .map {
-  margin-top: 90px;
+  margin-top: 130px;
   height: 75vh;
   display: flex;
   flex-direction: column;

frontend/src/app/components/pages/mainpage/mainpage.component.html

@@ -1,7 +1,6 @@
 
 <div class="center-container">
   <div class="main">
-    <app-loader></app-loader>
     <app-statistic-header></app-statistic-header>
     <app-roadmap></app-roadmap>
   </div>

frontend/src/app/components/pages/mainpage/mainpage.component.ts

@@ -1,10 +1,23 @@
 import { Component } from '@angular/core';
+import { OnInit } from '@angular/core';
+import { LoaderService } from 'app/services/loader.service';
 
 @Component({
   selector: 'app-mainpage',
   templateUrl: './mainpage.component.html',
   styleUrl: './mainpage.component.scss'
 })
-export class MainpageComponent {
+export class MainpageComponent implements OnInit{
+
+  constructor(private LoaderService: LoaderService) { }
+
+  ngOnInit(): void {
+    this.LoaderService.show();
+
+    //Simulate a html request
+    setTimeout(() => {
+      this.LoaderService.hide();
+    }, 2000);
+  }
 
 }

frontend/src/app/components/pages/ranking-page/ranking-page.component.spec.ts

@@ -1,14 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { RankingPageComponent } from './ranking-page.component';
+import { RankingTableComponent } from 'app/components/organisms/ranking-table/ranking-table.component';
+import { UserCardComponent } from 'app/components/atoms/user-card/user-card.component';
 
 describe('RankingPageComponent', () => {
   let component: RankingPageComponent;
   let fixture: ComponentFixture<RankingPageComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [RankingPageComponent]
+      declarations: [RankingPageComponent, RankingTableComponent, UserCardComponent]
     })
     .compileComponents();
 

frontend/src/app/services/loader.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoaderService } from './loader.service';
+
+describe('LoaderService', () => {
+  let service: LoaderService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoaderService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/services/loader.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoaderService {
+  public isLoading = new BehaviorSubject<boolean>(false);
+
+  constructor() {}
+
+  show() {
+    this.isLoading.next(true);
+  }
+
+  hide() {
+    this.isLoading.next(false);
+  }
+}