Commit b53db583 authored by Michail Tzanatos's avatar Michail Tzanatos
Browse files

skeleton loader when waiting for the api response

parent 46a40f41

src/app/landing/landing.component.html

+15 −5
Original line number Diff line number Diff line
@@ -46,7 +46,12 @@ 
					</svg>

				</div>

				<div class="card-body p-3">

					<h5 class="card-title font-weight-bold">{{isNaN(animatedCounts.registeredUsers) ? targetCounts.registeredUsers: animatedCounts.registeredUsers}}</h5>

					<div *ngIf="isLoading; else apiRespondedUsers">

						<h5 class="card-title"><skeleton [width]="'35%'"></skeleton></h5>

					</div>

					<ng-template #apiRespondedUsers>

						<h5 class="card-title font-weight-bold">{{isNaN(animatedCounts.registeredUsers) ? 'NaN': animatedCounts.registeredUsers}}</h5>

					</ng-template>

					<div class="card-text">Registered Users</div>

				</div>

			</div>
@@ -61,7 +66,12 @@ 
					</svg>

				</div>

				<div class="card-body p-3">

					<div *ngIf="isLoading; else apiRespondedServiceSpecs">

						<h5 class="card-title"><skeleton [width]="'35%'"></skeleton></h5>

					</div>

					<ng-template #apiRespondedServiceSpecs>

						<h5 class="card-title font-weight-bold">{{isNaN(animatedCounts.publishedServiceSpecs) ? ' ': animatedCounts.publishedServiceSpecs}}</h5>

					</ng-template>

					<div class="card-text">Published Service Specifications</div>

				</div>

			</div>
@@ -77,10 +87,10 @@ 
					</svg>

				</div>

				<div class="card-body p-3">

					<div *ngIf="isNaN(animatedCounts.registeredResourceSpecs); else apiResponded">

						<h5 class="card-title"><skeleton [width]="'50%'"></skeleton></h5>

					<div *ngIf="isNaN(animatedCounts.registeredResourceSpecs) || isLoading; else apiRespondedResourceSpecs">

						<h5 class="card-title"><skeleton [width]="'35%'"></skeleton></h5>

					</div>

					<ng-template #apiResponded>

					<ng-template #apiRespondedResourceSpecs>

						<h5 class="card-title font-weight-bold">{{animatedCounts.registeredResourceSpecs}}</h5>

					</ng-template>

					<div class="card-text">Registered Resource Specifications</div>

src/app/landing/landing.component.ts

+24 −12
Original line number Diff line number Diff line
@@ -5,7 +5,7 @@ import { OAuthService } from 'angular-oauth2-oidc'; 
import { AuthService } from 'src/app/shared/services/auth.service';

import { GeneralMetricsApiService } from '../openApis/openSliceMetrics/services';

import { asyncScheduler, forkJoin, scheduled } from 'rxjs';

import { catchError } from 'rxjs/operators';

import { catchError, delay } from 'rxjs/operators';

import Player from '@vimeo/player';



@Component({
@@ -26,6 +26,7 @@ export class LandingComponent implements OnInit { 
  // Video section variables

  private player: Player;

  videoLoaded: boolean = false;

  isLoading: boolean = true;



  @ViewChild('videoRef', { static: true }) videoElement!: ElementRef<HTMLIFrameElement>;
@@ -34,14 +35,14 @@ export class LandingComponent implements OnInit { 
  // publishedServiceSpecs = 9999;

  // registeredResourceSpecs = 9999;

  animatedCounts = {

    registeredUsers: 0,

    publishedServiceSpecs: 0,

    registeredResourceSpecs: 0

    registeredUsers: NaN,

    publishedServiceSpecs: NaN,

    registeredResourceSpecs: NaN

  };

  targetCounts = {

    registeredUsers: 0,

    publishedServiceSpecs: 0,

    registeredResourceSpecs: 0

    registeredUsers: NaN,

    publishedServiceSpecs: NaN,

    registeredResourceSpecs: NaN

  };

  private intervalId: any;
@@ -54,8 +55,6 @@ export class LandingComponent implements OnInit { 
    this.initializePlayer()



    

    // Initialize animated counts

    this.startAnimation();

    forkJoin({

      registeredUsers: this.generalMetricsService.getRegisteredIndividuals().pipe(

        catchError(error => {
@@ -75,13 +74,20 @@ export class LandingComponent implements OnInit { 
          return scheduled([{ registeredResourceSpecifications: NaN }], asyncScheduler);

        })

      )

    }).subscribe(

    })

    .pipe(delay(1000))

    .subscribe(

      results => {

        

        this.targetCounts.registeredUsers = results.registeredUsers.registeredIndividuals;

        this.targetCounts.publishedServiceSpecs = results.publishedServiceSpecs.publishedServiceSpecifications;

        this.targetCounts.registeredResourceSpecs = results.registeredResourceSpecs.registeredResourceSpecifications;

        this.isLoading = false;

        // Initialize animated counts

        this.startAnimation();



      }

    ) 

    );

  }



  isNaN(value: any): boolean {
@@ -163,6 +169,12 @@ export class LandingComponent implements OnInit { 


    const stepTime = 50;



    this.animatedCounts = {

      registeredUsers: 0,

      publishedServiceSpecs: 0,

      registeredResourceSpecs: 0

    }



    this.intervalId = setInterval(() => {

      for (const key in this.animatedCounts) {

        const k = key as keyof typeof this.animatedCounts;