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',
+  LoaderSmallCircle = 'assets/images/loader-small.gif',
+  LoaderLargeSquare = 'assets/images/loader-large.gif',
+  LoaderHorizontal = 'assets/images/loader-horizontal.gif'
+}
+
+export const enum LoaderTypes {
+  SmallCircle = 'small-circle',
+  Horizontal = 'horizontal',
+  LargeSquare = '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,9 +9,11 @@ import {
   TemplateRef,
   ViewContainerRef
 } from '@angular/core';
+import { LoaderTypes } from '@hypertrace/assets-library';
 import { Observable, ReplaySubject } from 'rxjs';
 import { LoadAsyncContext, LoadAsyncService } from './load-async.service';
 import {
+  LOADER_TYPE,
   ASYNC_WRAPPER_PARAMETERS$,
   LoadAsyncWrapperComponent,
   LoadAsyncWrapperParameters
@@ -23,26 +25,19 @@ import {
 export class LoadAsyncDirective implements OnChanges, OnDestroy {
   @Input('htLoadAsync')
   public data$?: Observable<unknown>;
+  @Input()
+  public htLoadAsyncLoaderType!: LoaderTypes;
+
   private readonly wrapperParamsSubject: ReplaySubject<LoadAsyncWrapperParameters> = new ReplaySubject(1);
-  private readonly wrapperInjector: Injector;
+  private wrapperInjector!: Injector;
   private wrapperView?: ComponentRef<LoadAsyncWrapperComponent>;
 
   public constructor(
     private readonly viewContainer: ViewContainerRef,
     private readonly componentFactoryResolver: ComponentFactoryResolver,
     private readonly loadAsyncService: LoadAsyncService,
     public readonly templateRef: TemplateRef<LoadAsyncContext>
-  ) {
-    this.wrapperInjector = Injector.create({
-      providers: [
-        {
-          provide: ASYNC_WRAPPER_PARAMETERS$,
-          useValue: this.wrapperParamsSubject.asObservable()
-        }
-      ],
-      parent: this.viewContainer.injector
-    });
-  }
+  ) {}
 
   public ngOnChanges(): void {
     if (this.data$) {
@@ -65,6 +60,23 @@ export class LoadAsyncDirective implements OnChanges, OnDestroy {
   private buildWrapperView(): ComponentRef<LoadAsyncWrapperComponent> {
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(LoadAsyncWrapperComponent);
 
+    // Second param for structural directive is undefined until this.data$ is defined
+    // So putting this assignment in constuctor will not work
+    // This will execute only once as this method is called only
+    this.wrapperInjector = Injector.create({
+      providers: [
+        {
+          provide: ASYNC_WRAPPER_PARAMETERS$,
+          useValue: this.wrapperParamsSubject.asObservable()
+        },
+        {
+          provide: LOADER_TYPE,
+          useValue: this.htLoadAsyncLoaderType
+        }
+      ],
+      parent: this.viewContainer.injector
+    });
+
     return this.viewContainer.createComponent(componentFactory, undefined, this.wrapperInjector);
   }
 }

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,38 @@
-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, LoaderTypes } 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: LoaderTypes = LoaderTypes.Horizontal;
+  public imagePath: ImagesAssetPath = ImagesAssetPath.LoaderHorizontal;
+
+  public ngOnChanges(): void {
+    // Unfortunatly passing undefined is overwriting default value
+    this.type = this.type ?? LoaderTypes.Horizontal;
+    this.imagePath = this.getImagePathFromType();
+  }
+
+  private getImagePathFromType(): ImagesAssetPath {
+    switch (this.type) {
+      case LoaderTypes.Horizontal:
+        return ImagesAssetPath.LoaderHorizontal;
+      case LoaderTypes.LargeSquare:
+        return ImagesAssetPath.LoaderLargeSquare;
+      case LoaderTypes.SmallCircle:
+        return ImagesAssetPath.LoaderSmallCircle;
+      default:
+        return assertUnreachable(this.type);
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject, InjectionToken, TemplateRef } from '@angular/core';
-import { IconType } from '@hypertrace/assets-library';
+import { IconType, LoaderTypes } from '@hypertrace/assets-library';
 import { Observable } from 'rxjs';
 import { switchMap, tap } from 'rxjs/operators';
 import { LoadAsyncStateType } from '../load-async-state.type';
@@ -9,12 +9,13 @@ export const ASYNC_WRAPPER_PARAMETERS$ = new InjectionToken<Observable<LoadAsync
   'ASYNC_WRAPPER_PARAMETERS$'
 );
 
+export const LOADER_TYPE = new InjectionToken<string>('LOADER_TYPE');
 @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>
+        <ht-loader [type]="this.loaderType"></ht-loader>
       </ng-container>
       <ng-container *ngSwitchCase="'${LoadAsyncStateType.Success}'">
         <ng-container *ngTemplateOutlet="this.content; context: state.context"></ng-container>
@@ -36,15 +37,20 @@ export class LoadAsyncWrapperComponent {
   public icon?: IconType;
   public title?: string;
   public description: string = '';
+  public loaderType: LoaderTypes;
 
   public content?: TemplateRef<LoadAsyncContext>;
 
-  public constructor(@Inject(ASYNC_WRAPPER_PARAMETERS$) parameters$: Observable<LoadAsyncWrapperParameters>) {
+  public constructor(
+    @Inject(ASYNC_WRAPPER_PARAMETERS$) parameters$: Observable<LoadAsyncWrapperParameters>,
+    @Inject(LOADER_TYPE) loaderType: LoaderTypes
+  ) {
     this.state$ = parameters$.pipe(
       tap(params => (this.content = params.content)),
       switchMap(parameter => parameter.state$),
       tap(state => this.updateMessage(state.type, (state as Partial<ErrorAsyncState>).description))
     );
+    this.loaderType = loaderType;
   }
 
   private updateMessage(stateType: LoadAsyncStateType, description: string = ''): void {

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>