maj

Author: EmmanuelLefevre

src/app/shared/error-handler/error-views/timeout-error/timeout-error.component.scss

@@ -19,7 +19,6 @@
   &.is-ready {
     transform: translateY(0);
     opacity: 1;
-    pointer-events: auto;
   }
 
   &__content {
@@ -36,8 +35,7 @@
     aspect-ratio: 1 / 1;
     max-width: 300px;
     margin: 0 auto;
-    animation: pop-in 0.8s cubic-bezier(0.26, 0.53, 0.74, 1.48) forwards;
-    will-change: transform;
+    animation: fade-in-up 0.7s ease-out forwards;
   }
 
   &__lottie {

src/app/shared/error-handler/error-views/timeout-error/timeout-error.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, inject, OnDestroy, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { DotLottie } from '@lottiefiles/dotlottie-web';
@@ -16,7 +16,7 @@ const DEFAULT_PIXEL_RATIO = 1;
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 
-export class TimeoutErrorComponent implements AfterViewInit, OnDestroy {
+export class TimeoutErrorComponent implements OnInit, OnDestroy {
 
   private readonly cdr = inject(ChangeDetectorRef);
 
@@ -26,7 +26,7 @@ export class TimeoutErrorComponent implements AfterViewInit, OnDestroy {
 
   isReady = false;
 
-  ngAfterViewInit(): void {
+  ngOnInit(): void {
     this.dotLottieInstance = new DotLottie({
       canvas: this.lottieCanvas.nativeElement,
       src: 'assets/animations/timeout-error-sandglass.lottie',

src/app/shared/error-handler/error-views/unknown-error/unknown-error.component.scss

@@ -21,7 +21,6 @@
   &.is-ready {
     transform: translateY(0);
     opacity: 1;
-    pointer-events: auto;
   }
 
   &__content {

src/app/shared/error-handler/error-views/unknown-error/unknown-error.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, inject, OnDestroy, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { DotLottie } from '@lottiefiles/dotlottie-web';
@@ -15,7 +15,7 @@ const DEFAULT_PIXEL_RATIO = 1;
   styleUrl: './unknown-error.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class UnknownErrorComponent implements AfterViewInit, OnDestroy {
+export class UnknownErrorComponent implements OnInit, OnDestroy {
 
   private readonly cdr = inject(ChangeDetectorRef);
 
@@ -25,7 +25,7 @@ export class UnknownErrorComponent implements AfterViewInit, OnDestroy {
 
   isReady = false;
 
-  ngAfterViewInit(): void {
+  ngOnInit(): void {
     this.dotLottieInstance = new DotLottie({
       canvas: this.lottieCanvas.nativeElement,
       src: 'assets/animations/unknown-error-abduction.lottie',

src/styles/base/_animations.scss

@@ -89,11 +89,11 @@ $shake-intensity: 1%;
 
 /*------Fade In Up------*/
 .fade-in-up {
-  animation: fade-in-up 0.5s ease-in-out;
+  animation: fade-in-up 0.7s ease-in-out;
 }
 
 @keyframes fade-in-up {
-  from { opacity: 0; transform: translate3d(0, 100%, 0); }
+  from { opacity: 0; transform: translate3d(0, 50%, 0); }
   to   { opacity: 1; transform: translate3d(0, 0, 0); }
 }
 
@@ -265,9 +265,9 @@ $shake-intensity: 1%;
   animation: pop-in 0.8s cubic-bezier(0.26, 0.53, 0.74, 1.48) forwards;
 }
 @keyframes pop-in {
-  0%   { opacity: 0; transform: scale3d(0.2, 0.2, 0.2); filter: blur(10px); }
-  70%  { opacity: 1; transform: scale3d(1.15, 1.15, 1.15); filter: blur(0px); }
-  100% { opacity: 1; transform: scale3d(1, 1, 1); filter: blur(0px); }
+  0%   { opacity: 0; transform: scale3d(0.7, 0.7, 0.7); }
+  70%  { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); }
+  100% { opacity: 1; transform: scale3d(1, 1, 1); }
 }
 
 /*------Sonar Pulse------*/