Initial draft for new loaders using gifs

projects/assets-library/src/images/image-type.ts

@@ -0,0 +1,12 @@
+export const enum ImagesAssetPath {
+  ErrorPage = 'assets/images/error-page.svg',
+  LoaderSpinner = 'assets/images/loader-spinner.gif',
+  LoaderPage = 'assets/images/loader-page.gif',
+  LoaderExpandableRow = 'assets/images/loader-expandable-row.gif'
+}
+
+export const enum LoaderType {
+  Spinner = 'small-circle',
+  ExpandableRow = 'horizontal',
+  Page = 'large-square'
+}

projects/assets-library/src/public-api.ts

@@ -6,3 +6,4 @@ export * from './icons/icon-type';
 export * from './icons/icon-registry.service';
 export * from './icons/icon-library.module';
 export * from './icons/testing/icon-library-testing.module';
+export * from './images/image-type';

projects/components/src/load-async/load-async.directive.ts

@@ -9,6 +9,7 @@ import {
   TemplateRef,
   ViewContainerRef
 } from '@angular/core';
+import { LoaderType } from '@hypertrace/assets-library';
 import { Observable, ReplaySubject } from 'rxjs';
 import { LoadAsyncContext, LoadAsyncService } from './load-async.service';
 import {
@@ -23,8 +24,11 @@ import {
 export class LoadAsyncDirective implements OnChanges, OnDestroy {
   @Input('htLoadAsync')
   public data$?: Observable<unknown>;
+  @Input()
+  public htLoadAsyncLoaderType!: LoaderType;
+
   private readonly wrapperParamsSubject: ReplaySubject<LoadAsyncWrapperParameters> = new ReplaySubject(1);
-  private readonly wrapperInjector: Injector;
+  private wrapperInjector!: Injector;
   private wrapperView?: ComponentRef<LoadAsyncWrapperComponent>;
 
   public constructor(
@@ -49,6 +53,7 @@ export class LoadAsyncDirective implements OnChanges, OnDestroy {
       this.wrapperView = this.wrapperView || this.buildWrapperView();
       this.wrapperParamsSubject.next({
         state$: this.loadAsyncService.mapObservableState(this.data$),
+        loaderType: this.htLoadAsyncLoaderType,
         content: this.templateRef
       });
     } else {

projects/components/src/load-async/loader/loader.component.scss

@@ -7,4 +7,19 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+
+  .large-square {
+    height: 50px;
+    width: 50px;
+  }
+
+  .small-circle {
+    height: 20px;
+    width: 20px;
+  }
+
+  .horizontal {
+    height: 20px;
+    width: auto;
+  }
 }

projects/components/src/load-async/loader/loader.component.ts

@@ -1,15 +1,36 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { IconType } from '@hypertrace/assets-library';
-import { IconSize } from '../../icon/icon-size';
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+import { ImagesAssetPath, LoaderType } from '@hypertrace/assets-library';
+import { assertUnreachable } from '@hypertrace/common';
 
 @Component({
   selector: 'ht-loader',
   styleUrls: ['./loader.component.scss'],
   template: `
     <div class="ht-loader">
-      <ht-icon icon="${IconType.Loading}" size="${IconSize.Large}"></ht-icon>
+      <img [ngClass]="[this.type]" [src]="this.imagePath" />
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class LoaderComponent {}
+export class LoaderComponent implements OnChanges {
+  @Input()
+  public type: LoaderType = LoaderType.ExpandableRow;
+  public imagePath: ImagesAssetPath = ImagesAssetPath.LoaderExpandableRow;
+
+  public ngOnChanges(): void {
+    this.imagePath = this.getImagePathFromType();
+  }
+
+  private getImagePathFromType(): ImagesAssetPath {
+    switch (this.type) {
+      case LoaderType.ExpandableRow:
+        return ImagesAssetPath.LoaderExpandableRow;
+      case LoaderType.Page:
+        return ImagesAssetPath.LoaderPage;
+      case LoaderType.Spinner:
+        return ImagesAssetPath.LoaderSpinner;
+      default:
+        return assertUnreachable(this.type);
+    }
+  }
+}

projects/components/src/load-async/wrapper/load-async-wrapper.component.ts

@@ -1,20 +1,21 @@
 import { ChangeDetectionStrategy, Component, Inject, InjectionToken, TemplateRef } from '@angular/core';
-import { IconType } from '@hypertrace/assets-library';
-import { Observable } from 'rxjs';
+import { IconType, LoaderType } from '@hypertrace/assets-library';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { switchMap, tap } from 'rxjs/operators';
 import { LoadAsyncStateType } from '../load-async-state.type';
 import { AsyncState, ErrorAsyncState, LoadAsyncContext } from '../load-async.service';
 
 export const ASYNC_WRAPPER_PARAMETERS$ = new InjectionToken<Observable<LoadAsyncWrapperParameters>>(
   'ASYNC_WRAPPER_PARAMETERS$'
 );
-
 @Component({
   selector: 'ht-load-async-wrapper',
   template: `
     <div *ngIf="this.state$ | async as state" class="fill-container" [ngSwitch]="state.type">
       <ng-container *ngSwitchCase="'${LoadAsyncStateType.Loading}'">
-        <ht-loader></ht-loader>
+        <ng-container *ngIf="this.loaderType$ | async as loaderType">
+          <ht-loader [type]="loaderType"></ht-loader>
+        </ng-container>
       </ng-container>
       <ng-container *ngSwitchCase="'${LoadAsyncStateType.Success}'">
         <ng-container *ngTemplateOutlet="this.content; context: state.context"></ng-container>
@@ -39,9 +40,13 @@ export class LoadAsyncWrapperComponent {
 
   public content?: TemplateRef<LoadAsyncContext>;
 
+  private readonly loaderTypeSubject: BehaviorSubject<LoaderType> = new BehaviorSubject<LoaderType>(LoaderType.Spinner);
+  public readonly loaderType$: Observable<LoaderType> = this.loaderTypeSubject.asObservable();
+
   public constructor(@Inject(ASYNC_WRAPPER_PARAMETERS$) parameters$: Observable<LoadAsyncWrapperParameters>) {
     this.state$ = parameters$.pipe(
       tap(params => (this.content = params.content)),
+      tap(params => this.loaderTypeSubject.next(params.loaderType)),
       switchMap(parameter => parameter.state$),
       tap(state => this.updateMessage(state.type, (state as Partial<ErrorAsyncState>).description))
     );
@@ -65,5 +70,6 @@ export class LoadAsyncWrapperComponent {
 
 export interface LoadAsyncWrapperParameters {
   state$: Observable<AsyncState>;
+  loaderType: LoaderType;
   content: TemplateRef<LoadAsyncContext>;
 }

projects/components/src/not-found/not-found.component.ts

@@ -1,15 +1,15 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ImagesAssetPath } from '@hypertrace/assets-library';
 import { NavigationService } from '@hypertrace/common';
 import { ButtonRole, ButtonStyle } from '../button/button';
-
 @Component({
   selector: 'ht-not-found',
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./not-found.component.scss'],
   template: `
     <div class="not-found-container fill-container">
       <div class="not-found-content">
-        <img class="not-found-image" src="assets/images/error-page.svg" loading="lazy" alt="not found page" />
+        <img class="not-found-image" src="${ImagesAssetPath.ErrorPage}" loading="lazy" alt="not found page" />
         <div class="not-found-message-wrapper">
           <div class="not-found-text-wrapper">
             <div class="not-found-message">Page not found</div>