Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Target

Show changes

Only incoming changes from source

Include changes to target since source was created

Commits on Source 2

feat: add loader for app in order to prevent render issue · 9cbb1b10
Hugo SUBTIL authored May 25, 2022

9cbb1b10

Merge branch 'feat/app-loader' into 'V2.0' · 2193531f

Hugo SUBTIL authored Jun 1, 2022

feat: add loader for app in order to prevent render issue

See merge request web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client!281

2193531f

src/app/app.component.html

+5
−1

Original line number
Original line
Diff line number
Diff line

<div class="app-container">

<div class="app-container">

  <app-header></app-header>

  <app-header></app-header>

  <div class="app-body">

  <div class="app-body">

    <div *ngIf="loading" class="loader">

      <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />

    </div>

    <ng-container> </ng-container>

    <router-outlet name="left-pane"></router-outlet>

    <router-outlet name="left-pane"></router-outlet>

    <router-outlet></router-outlet>

    <router-outlet></router-outlet>

    <router-outlet name="print"></router-outlet>

    <router-outlet name="print"></router-outlet>

    <router-outlet name="footer"></router-outlet>

    <router-outlet *ngIf="!loading" name="footer"></router-outlet>

  </div>

  </div>

</div>

</div>

src/app/app.component.scss

+8
−9

Original line number
Original line
Diff line number
Diff line

@@ -20,13 +20,12 @@

  height: calc(100vh - #{$header-height});

  height: calc(100vh - #{$header-height});

}

}

.motif {

.loader {

  background-color: $primary-color;

  height: 100%;

  background-size: 58px 58px;

  display: flex;

  background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px, 0px 36px, 4px 2px, 29px 6px, 33px 30px;

  justify-content: center;

  background-image: linear-gradient(335deg, $white 23px, transparent 23px),

  align-items: center;

    linear-gradient(155deg, $white 23px, transparent 23px), linear-gradient(335deg, $white 23px, transparent 23px),

  &.loader-gif {

    linear-gradient(155deg, $white 23px, transparent 23px), linear-gradient(335deg, $white 10px, transparent 10px),

    max-height: 185px;

    linear-gradient(155deg, $white 10px, transparent 10px), linear-gradient(335deg, $white 10px, transparent 10px),

  }

    linear-gradient(155deg, $white 10px, transparent 10px);

}

}

src/app/app.component.ts

+24
−2

Original line number
Original line
Diff line number
Diff line

import { Component, OnInit } from '@angular/core';

import { Component, OnInit } from '@angular/core';

import { NavigationEnd, Router } from '@angular/router';

import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';

import { ProfileService } from './profile/services/profile.service';

import { ProfileService } from './profile/services/profile.service';

import { AuthService } from './services/auth.service';

import { AuthService } from './services/auth.service';

import { RouterListenerService } from './services/routerListener.service';

import { RouterListenerService } from './services/routerListener.service';

@@ -12,7 +12,8 @@ import { PrintService } from './shared/service/print.service';

  styleUrls: ['./app.component.scss'],

  styleUrls: ['./app.component.scss'],

})

})

export class AppComponent implements OnInit {

export class AppComponent implements OnInit {

  title = 'resin';

  public title = 'resin';

  public loading = true;

  constructor(

  constructor(

    public printService: PrintService,

    public printService: PrintService,

@@ -32,6 +33,27 @@ export class AppComponent implements OnInit {

    this.routerListener.loadRouting();

    this.routerListener.loadRouting();

    // handle pwa update

    // handle pwa update

    this.updateService.subscribeUpdate();

    this.updateService.subscribeUpdate();

    this.router.events.subscribe((event) => {

      switch (true) {

        case event instanceof NavigationStart: {

          this.loading = true;

          break;

        }

        case event instanceof NavigationEnd:

        case event instanceof NavigationCancel:

        case event instanceof NavigationError: {

          setTimeout(() => {

            this.loading = false;

          }, 100);

          break;

        }

        default: {

          break;

        }

      }

    });

  }

  }

  ngOnInit(): void {

  ngOnInit(): void {

Source

Target

Files