Used angular animations for loaders.

Fall back to normal localStorage.set if requestIdleCallback is not supported.
altair-graphql · Jan 31, 2020 · e0913b7 · e0913b7
1 parent 083855f
commit e0913b7
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 13 deletions.
diff --git a/packages/altair-app/src/app/animations.ts b/packages/altair-app/src/app/animations.ts
@@ -0,0 +1,21 @@
+import { trigger, transition, style, animate } from '@angular/animations';
+
+export const fadeInOutAnimationTrigger = trigger(
+  'fadeInOutAnimation',
+  [
+    transition(
+      ':enter',
+      [
+        style({ opacity: 0 }),
+        animate('.3s ease', style({ opacity: 1 }))
+      ]
+    ),
+    transition(
+      ':leave',
+      [
+        style({ opacity: 1 }),
+        animate('.3s ease', style({ opacity: 0 }))
+      ]
+    )
+  ]
+);
diff --git a/packages/altair-app/src/app/components/doc-viewer/doc-viewer/doc-viewer.component.html b/packages/altair-app/src/app/components/doc-viewer/doc-viewer/doc-viewer.component.html
@@ -1,5 +1,5 @@
 <div class="app-doc-viewer" *ngIf="allowIntrospection">
-  <div class="app-doc-loader" [ngClass]="{ 'show-loader': isLoading }">
+  <div class="app-doc-loader" *ngIf="isLoading" [@fadeInOutAnimation]>
       <div class="app-doc-loader-content">
         <img src="assets/img/logo.svg" alt="" class="anim" [ngClass]="{ 'anim-rotate': isLoading }">
         {{ 'LOADING_INDICATOR_TEXT' | translate }}

diff --git a/packages/altair-app/src/app/components/doc-viewer/doc-viewer/doc-viewer.component.ts b/packages/altair-app/src/app/components/doc-viewer/doc-viewer/doc-viewer.component.ts
@@ -26,11 +26,15 @@ import {
   GraphQLFieldMap
 } from 'graphql';
 import { DocumentIndexEntry } from '../models';
+import { fadeInOutAnimationTrigger } from 'app/animations';
 
 @Component({
   selector: 'app-doc-viewer',
   templateUrl: './doc-viewer.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    fadeInOutAnimationTrigger,
+  ]
   // styleUrls: ['./doc-viewer.component.scss']
 })
 export class DocViewerComponent implements OnChanges, OnDestroy {

diff --git a/packages/altair-app/src/app/containers/window/window.component.html b/packages/altair-app/src/app/containers/window/window.component.html
@@ -3,7 +3,7 @@
   [pluginData]="pluginData"
 ></app-plugin-element>
 <div class="app-window__content">
-  <div class="window-loader" [ngClass]="{ 'window-loader--show': isLoading$ | async }">
+  <div class="window-loader" *ngIf="isLoading$ | async" [@fadeInOutAnimation]>
     <div class="window-loader__content">
       <img src="assets/img/logo.svg" alt="" class="loader-img anim" [ngClass]="{ 'anim-rotate': isLoading$ | async }"> {{ 'LOADING_INDICATOR_TEXT' | translate }}
       <div class="window-loader__actions">

diff --git a/packages/altair-app/src/app/containers/window/window.component.ts b/packages/altair-app/src/app/containers/window/window.component.ts
@@ -38,10 +38,14 @@ import { Observable, empty as observableEmpty, combineLatest } from 'rxjs';
 import { PluginComponentData, PluginInstance, PluginType } from '../../services/plugin/plugin';
 import { untilDestroyed } from 'ngx-take-until-destroy';
 import { debug } from 'app/utils/logger';
+import { fadeInOutAnimationTrigger } from 'app/animations';
 
 @Component({
   selector: 'app-window',
-  templateUrl: './window.component.html'
+  templateUrl: './window.component.html',
+  animations: [
+    fadeInOutAnimationTrigger,
+  ]
 })
 export class WindowComponent implements OnInit, OnDestroy {
   queryResult$: Observable<any>;

diff --git a/packages/altair-app/src/app/utils/performant-local-storage.ts b/packages/altair-app/src/app/utils/performant-local-storage.ts
@@ -59,6 +59,9 @@ class PerformantLocalStorage implements Storage {
       });
     }
 
+    if (!('requestIdleCallback' in window)) {
+      return this.storage.setItem(key, value);
+    }
     return runSetItem();
   }
 

diff --git a/packages/altair-app/src/scss/components/_doc-viewer.scss b/packages/altair-app/src/scss/components/_doc-viewer.scss
@@ -57,7 +57,6 @@ app-doc-viewer {
 }
 
 .app-doc-loader {
-  @include hide-transition;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -75,10 +74,6 @@ app-doc-viewer {
   }
 }
 
-.show-loader {
-  @include show-transition;
-}
-
 .app-doc-loader-content {
   position: relative;
   color: transparent;

diff --git a/packages/altair-app/src/scss/components/_loader.scss b/packages/altair-app/src/scss/components/_loader.scss
@@ -1,5 +1,4 @@
 .window-loader {
-  @include hide-transition;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -17,10 +16,6 @@
   }
 }
 
-.window-loader--show {
-  @include show-transition;
-}
-
 .window-loader__content {
   position: relative;
   color: transparent;