refactor(*): change splash screen during app loading

infra-geo-ouverte · Jul 17, 2023 · f58c14b · f58c14b
1 parent bdba26d
commit f58c14b
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 86 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,7 +1,7 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { Title, Meta } from '@angular/platform-browser';
-import { userAgent } from '@igo2/utils';
+import { DomUtils, userAgent } from '@igo2/utils';
 import {
  LanguageService,
  ConfigService,
@@ -10,13 +10,15 @@ import {
 import { AuthOptions } from '@igo2/auth';
 import { AnalyticsListenerService } from '@igo2/integration';
 import { PwaService } from './services/pwa.service';
+import { NavigationEnd, Router } from '@angular/router';
+import { delay, first } from 'rxjs';
 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
  public authConfig: AuthOptions;
  public hasHeader = true;
  public hasFooter = true;
@@ -30,7 +32,8 @@ export class AppComponent {
  private titleService: Title,
  private metaService: Meta,
  private messageService: MessageService,
- private pwaService: PwaService
+ private pwaService: PwaService,
+ private router: Router
  ) {
  this.authConfig = this.configService.getConfig('auth');
 
@@ -42,21 +45,56 @@ export class AppComponent {
  this.detectOldBrowser();
 
  this.hasHeader = this.configService.getConfig('header.hasHeader') === undefined ? false :
- this.configService.getConfig('header.hasHeader');
+  this.configService.getConfig('header.hasHeader');
 
  this.hasFooter = this.configService.getConfig('hasFooter') === undefined ? false :
- this.configService.getConfig('hasFooter');
+  this.configService.getConfig('hasFooter');
 
  this.setManifest();
  this.installPrompt();
  this.pwaService.checkForUpdates();
  }
 
+ ngOnInit(): void {
+ this.handleSplashScreen();
+ }
+
+ private handleSplashScreen(): void {
+ this.router.events
+ .pipe(
+ first((events) => events instanceof NavigationEnd),
+ delay(500),
+ )
+ .subscribe(() => {
+ this._removeSplashScreen();
+ });
+ }
+
+ private _removeSplashScreen(): void {
+ const intro = this.document.getElementById('splash-screen');
+ if (!intro) {
+ return;
+ }
+ intro.classList.add('is-destroying');
+
+ const destroyingAnimationTime = 300;
+ const stylesheet = this.document.getElementById('splash-screen-stylesheet');
+
+ setTimeout(() => {
+ DomUtils.remove(intro);
+ DomUtils.remove(stylesheet);
+ }, destroyingAnimationTime);
+ }
+
  private readTitleConfig() {
  this.languageService.translate.get(this.configService.getConfig('title')).subscribe(title => {
  if (title) {
  this.titleService.setTitle(title);
  this.metaService.addTag({ name: 'title', content: title });
+ const splashScreenTitle = this.document.getElementById('splash-screen-title');
+ if (splashScreenTitle) {
+ splashScreenTitle.innerText = title
+ }
  }
  });
  }

diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/index.html b/src/index.html
@@ -11,88 +11,95 @@
  />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
 
- <!-- inline spinner styles to be able to display spinner right away -->
- <style type="text/css">
- body,
- html {
- height: 100%;
- }
- .app-loading {
- position: relative;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100%;
- font-family: Arial, Helvetica, sans-serif;
- color: #bbb;
- }
- .app-loading .spinner {
- height: 200px;
- width: 200px;
- animation: rotate 2s linear infinite;
- transform-origin: center center;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
+ <link rel="manifest" id="igoManifestByConfig" />
+ <link rel="apple-touch-icon" href="assets/icons/icon-192x192-full.png" />
+ <link id="theme-styles" rel="stylesheet" />
+ <meta name="theme-color" content="#1976d2" />
+</head>
+
+<body>
+ <app-root></app-root>
+ <div id="splash-screen" class="is-loaded">
+ <div id="splash-screen__filmstrip">
+ <img alt="" aria-hidden="true" src="assets/logo.png" />
+ <h1 id="splash-screen-title"></h1>
+ </div>
+ <svg id="splash-screen__spinner" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M12 21a9 9 0 1 0-9-9" fill="none" stroke="#b0bec5" stroke-width="2" stroke-linecap="round"></path>
+ </svg>
+ </div>
+
+ <style id="splash-screen-stylesheet">
+ #splash-screen {
+ align-items: center;
+ background-color: #f5f7f9;
+ bottom: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ left: 0;
+ opacity: 1;
+ position: absolute;
+ right: 0;
+ top: 0;
+ transform: translateZ(0);
+ z-index: 1999;
+ transition: all 300ms;
+ }
+
+ #splash-screen h1 {
+ font-family: sans-serif;
+ color: rgba(0, 0, 0, 0.64);
+ }
+
+ #splash-screen.is-destroying {
+ opacity: 0;
+ }
+
+ #splash-screen__filmstrip {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 24px;
+ }
+
+ #splash-screen__filmstrip img {
+ width: fit-content;
+ height: 95px;
+ }
+
+ #splash-screen__spinner {
+ margin-top: 0;
+ opacity: 0;
+ }
+
+ #splash-screen.is-loaded #splash-screen__spinner {
+ animation: spinner-fade 0.2s ease 0.8s,
+ spinner-rotate 1s linear infinite;
+ animation-fill-mode: forwards;
+ }
+
+ @keyframes spinner-fade {
+ from {
+ opacity: 0;
  }
- .app-loading .spinner .path {
- stroke-dasharray: 1, 200;
- stroke-dashoffset: 0;
- animation: dash 1.5s ease-in-out infinite;
- stroke-linecap: round;
- stroke: #ddd;
+
+ to {
+ opacity: 1;
  }
- @keyframes rotate {
- 100% {
- transform: rotate(360deg);
- }
+ }
+
+ @keyframes spinner-rotate {
+ from {
+ transform: translateZ(0) rotate(0deg);
  }
- @keyframes dash {
- 0% {
- stroke-dasharray: 1, 200;
- stroke-dashoffset: 0;
- }
- 50% {
- stroke-dasharray: 89, 200;
- stroke-dashoffset: -35px;
- }
- 100% {
- stroke-dasharray: 89, 200;
- stroke-dashoffset: -124px;
- }
+
+ to {
+ transform: translateZ(0) rotate(360deg);
  }
- </style>
+ }
+ </style>
+ <noscript>Please enable JavaScript to continue using this application.</noscript>
+</body>
 
- <link rel="manifest" id="igoManifestByConfig" />
- <link rel="apple-touch-icon" href="assets/icons/icon-192x192-full.png" />
- <link
- id="theme-styles"
- rel="stylesheet"/>
- <meta name="theme-color" content="#1976d2" />
- </head>
- <body>
- <app-root>
- <div class="app-loading">
- Loading...
- <svg class="spinner" viewBox="25 25 50 50">
- <circle
- class="path"
- cx="50"
- cy="50"
- r="20"
- fill="none"
- stroke-width="2"
- stroke-miterlimit="10"
- />
- </svg>
- </div>
- </app-root>
- <noscript
- >Please enable JavaScript to continue using this application.</noscript
- >
- </body>
-</html>
+</html>