feat: Skeleton loader for LoadAsync directive (#1373)

* feat: added skeleton component

* fix: integrating skeleton component with loader

* style: adding loader types and fixing display

* feat: added skeleton shapes and styling

* style: minor style adjustments to skeletons

* feat: added donut skeleton shape

* fix: default isOldLoaderFlag to true

* test: updated for loader component changes

* test: skeleton component testing

Co-authored-by: Christian Quinn <christian@FewGoodTaters.local>

Author: Christian862

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

@@ -2,13 +2,14 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { IconModule } from '../icon/icon.module';
 import { MessageDisplayModule } from '../message-display/message-display.module';
+import { SkeletonModule } from '../skeleton/skeleton.module';
 import { LoadAsyncDirective } from './load-async.directive';
 import { LoaderComponent } from './loader/loader.component';
 import { LoadAsyncWrapperComponent } from './wrapper/load-async-wrapper.component';
 
 @NgModule({
   declarations: [LoadAsyncDirective, LoadAsyncWrapperComponent, LoaderComponent],
-  imports: [CommonModule, IconModule, MessageDisplayModule],
+  imports: [CommonModule, IconModule, MessageDisplayModule, SkeletonModule],
   exports: [LoadAsyncDirective]
 })
 export class LoadAsyncModule {}

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

@@ -62,7 +62,14 @@ export type AsyncState = LoadingAsyncState | SuccessAsyncState | NoDataOrErrorAs
 export const enum LoaderType {
   Spinner = 'spinner',
   ExpandableRow = 'expandable-row',
-  Page = 'page'
+  Page = 'page',
+  Rectangle = 'rectangle',
+  Text = 'text',
+  Square = 'square',
+  Circle = 'circle',
+  TableRow = 'table-row',
+  ListItem = 'list-item',
+  Donut = 'donut'
 }
 
 interface LoadingAsyncState {

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

@@ -3,10 +3,6 @@
 .ht-loader {
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
 
   .page {
     height: 50px;
@@ -23,3 +19,10 @@
     width: auto;
   }
 }
+
+.flex-centered {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -1,6 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { ImagesAssetPath } from '@hypertrace/assets-library';
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { SkeletonComponent, SkeletonType } from '../../skeleton/skeleton.component';
 import { LoaderType } from '../load-async.service';
 import { LoaderComponent } from './loader.component';
 
@@ -9,13 +11,15 @@ describe('Loader component', () => {
 
   const createHost = createHostFactory({
     component: LoaderComponent,
+    declarations: [MockComponent(SkeletonComponent)],
     imports: [CommonModule]
   });
 
   test('Loader component when loader type is page', () => {
     spectator = createHost(`<ht-loader [loaderType]="'${LoaderType.Page}'"></ht-loader>`);
 
     expect(spectator.query('.ht-loader')).toExist();
+    expect(spectator.query('.ht-loader')).toHaveClass('flex-centered');
     expect(spectator.query('.ht-loader img')).toExist();
     expect(spectator.query('.ht-loader img')).toHaveClass(LoaderType.Page);
     expect(spectator.query('.ht-loader img')).toHaveAttribute('src', ImagesAssetPath.LoaderPage);
@@ -25,6 +29,7 @@ describe('Loader component', () => {
     spectator = createHost(`<ht-loader></ht-loader>`);
 
     expect(spectator.query('.ht-loader')).toExist();
+    expect(spectator.query('.ht-loader')).toHaveClass('flex-centered');
     expect(spectator.query('.ht-loader img')).toExist();
     expect(spectator.query('.ht-loader img')).toHaveClass(LoaderType.Spinner);
     expect(spectator.query('.ht-loader img')).toHaveAttribute('src', ImagesAssetPath.LoaderSpinner);
@@ -34,6 +39,7 @@ describe('Loader component', () => {
     spectator = createHost(`<ht-loader [loaderType]="'${LoaderType.Spinner}'"></ht-loader>`);
 
     expect(spectator.query('.ht-loader')).toExist();
+    expect(spectator.query('.ht-loader')).toHaveClass('flex-centered');
     expect(spectator.query('.ht-loader img')).toExist();
     expect(spectator.query('.ht-loader img')).toHaveClass(LoaderType.Spinner);
     expect(spectator.query('.ht-loader img')).toHaveAttribute('src', ImagesAssetPath.LoaderSpinner);
@@ -43,8 +49,93 @@ describe('Loader component', () => {
     spectator = createHost(`<ht-loader [loaderType]="'${LoaderType.ExpandableRow}'"></ht-loader>`);
 
     expect(spectator.query('.ht-loader')).toExist();
+    expect(spectator.query('.ht-loader')).toHaveClass('flex-centered');
     expect(spectator.query('.ht-loader img')).toExist();
     expect(spectator.query('.ht-loader img')).toHaveClass(LoaderType.ExpandableRow);
     expect(spectator.query('.ht-loader img')).toHaveAttribute('src', ImagesAssetPath.LoaderExpandableRow);
   });
+
+  test('Should use old loader type by default', () => {
+    spectator = createHost(`<ht-loader></ht-loader>`);
+
+    expect(spectator.component.isOldLoaderType).toBe(true);
+    expect(spectator.query(SkeletonComponent)).not.toExist();
+  });
+
+  test('Should use corresponding skeleton component for loader type rectangle', () => {
+    spectator = createHost(`<ht-loader [loaderType]="'${LoaderType.Rectangle}'" ></ht-loader>`);
+
+    expect(spectator.query('.ht-loader')).toExist();
+    expect(spectator.query('.ht-loader')).not.toHaveClass('flex-centered');
+
+    const skeletonComponent = spectator.query(SkeletonComponent);
+    expect(skeletonComponent).toExist();
+    expect(skeletonComponent).toHaveAttribute('skeletonType', SkeletonType.Rectangle);
+  });
+
+  test('Should use corresponding skeleton component for loader type rectangle text', () => {
+    spectator = createHost(`<ht-loader [loaderType]="'${LoaderType.Text}'" ></ht-loader>`);
+
+    expect(spectator.query('.ht-loader')).toExist();
+    expect(spectator.query('.ht-loader')).not.toHaveClass('flex-centered');
+
+    const skeletonComponent = spectator.query(SkeletonComponent);
+    expect(skeletonComponent).toExist();
+    expect(skeletonComponent).toHaveAttribute('skeletonType', SkeletonType.Text);
+  });
+
+  test('Should use corresponding skeleton component for loader type circle', () => {
+    spectator = createHost(`<ht-loader [loaderType]="'${LoaderType.Circle}'" ></ht-loader>`);
+
+    expect(spectator.query('.ht-loader')).toExist();
+    expect(spectator.query('.ht-loader')).not.toHaveClass('flex-centered');
+
+    const skeletonComponent = spectator.query(SkeletonComponent);
+    expect(skeletonComponent).toExist();
+    expect(skeletonComponent).toHaveAttribute('skeletonType', SkeletonType.Circle);
+  });
+
+  test('Should use corresponding skeleton component for loader type square', () => {
+    spectator = createHost(`<ht-loader [loaderType]="'${LoaderType.Square}'" ></ht-loader>`);
+
+    expect(spectator.query('.ht-loader')).toExist();
+    expect(spectator.query('.ht-loader')).not.toHaveClass('flex-centered');
+
+    const skeletonComponent = spectator.query(SkeletonComponent);
+    expect(skeletonComponent).toExist();
+    expect(skeletonComponent).toHaveAttribute('skeletonType', SkeletonType.Square);
+  });
+
+  test('Should use corresponding skeleton component for loader type table row', () => {
+    spectator = createHost(`<ht-loader [loaderType]="'${LoaderType.TableRow}'" ></ht-loader>`);
+
+    expect(spectator.query('.ht-loader')).toExist();
+    expect(spectator.query('.ht-loader')).not.toHaveClass('flex-centered');
+
+    const skeletonComponent = spectator.query(SkeletonComponent);
+    expect(skeletonComponent).toExist();
+    expect(skeletonComponent).toHaveAttribute('skeletonType', SkeletonType.TableRow);
+  });
+
+  test('Should use corresponding skeleton component for loader type donut', () => {
+    spectator = createHost(`<ht-loader [loaderType]="'${LoaderType.Donut}'" ></ht-loader>`);
+
+    expect(spectator.query('.ht-loader')).toExist();
+    expect(spectator.query('.ht-loader')).not.toHaveClass('flex-centered');
+
+    const skeletonComponent = spectator.query(SkeletonComponent);
+    expect(skeletonComponent).toExist();
+    expect(skeletonComponent).toHaveAttribute('skeletonType', SkeletonType.Donut);
+  });
+
+  test('Should use corresponding skeleton component for loader type list item', () => {
+    spectator = createHost(`<ht-loader [loaderType]="'${LoaderType.ListItem}'" ></ht-loader>`);
+
+    expect(spectator.query('.ht-loader')).toExist();
+    expect(spectator.query('.ht-loader')).not.toHaveClass('flex-centered');
+
+    const skeletonComponent = spectator.query(SkeletonComponent);
+    expect(skeletonComponent).toExist();
+    expect(skeletonComponent).toHaveAttribute('skeletonType', SkeletonType.ListItem);
+  });
 });

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

@@ -1,25 +1,66 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { ImagesAssetPath } from '@hypertrace/assets-library';
+import { assertUnreachable } from '@hypertrace/common';
+import { SkeletonType } from '../../skeleton/skeleton.component';
 import { LoaderType } from '../load-async.service';
 
 @Component({
   selector: 'ht-loader',
   styleUrls: ['./loader.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="ht-loader">
-      <img [ngClass]="[this.currentLoaderType]" [src]="this.getImagePathFromType(this.currentLoaderType)" />
+    <div class="ht-loader" [ngClass]="{ 'flex-centered': this.isOldLoaderType }">
+      <ng-container *ngIf="!this.isOldLoaderType; else oldLoaderTemplate">
+        <ht-skeleton [skeletonType]="this.skeletonType"></ht-skeleton>
+      </ng-container>
+
+      <ng-template #oldLoaderTemplate>
+        <img [ngClass]="[this.currentLoaderType]" [src]="this.imagePath" />
+      </ng-template>
     </div>
   `
 })
 export class LoaderComponent implements OnChanges {
   @Input()
   public loaderType?: LoaderType;
 
+  public skeletonType: SkeletonType = SkeletonType.Rectangle;
+
   public currentLoaderType: LoaderType = LoaderType.Spinner;
 
+  public imagePath: ImagesAssetPath = ImagesAssetPath.LoaderSpinner;
+
+  public isOldLoaderType: boolean = true;
+
   public ngOnChanges(): void {
     this.currentLoaderType = this.loaderType ?? LoaderType.Spinner;
+
+    if (this.determineIfOldLoaderType(this.currentLoaderType)) {
+      this.isOldLoaderType = true;
+      this.imagePath = this.getImagePathFromType(this.currentLoaderType);
+    } else {
+      this.isOldLoaderType = false;
+      this.skeletonType = this.getSkeletonTypeForLoader(this.currentLoaderType);
+    }
+  }
+
+  public determineIfOldLoaderType(loaderType: LoaderType): boolean {
+    switch (loaderType) {
+      case LoaderType.Spinner:
+      case LoaderType.ExpandableRow:
+      case LoaderType.Page:
+        return true;
+      case LoaderType.Circle:
+      case LoaderType.Text:
+      case LoaderType.ListItem:
+      case LoaderType.Rectangle:
+      case LoaderType.Square:
+      case LoaderType.TableRow:
+      case LoaderType.Donut:
+        return false;
+      default:
+        return assertUnreachable(loaderType);
+    }
   }
 
   public getImagePathFromType(loaderType: LoaderType): ImagesAssetPath {
@@ -33,4 +74,23 @@ export class LoaderComponent implements OnChanges {
         return ImagesAssetPath.LoaderSpinner;
     }
   }
+
+  public getSkeletonTypeForLoader(curLoaderType: LoaderType): SkeletonType {
+    switch (curLoaderType) {
+      case LoaderType.Text:
+        return SkeletonType.Text;
+      case LoaderType.Circle:
+        return SkeletonType.Circle;
+      case LoaderType.Square:
+        return SkeletonType.Square;
+      case LoaderType.TableRow:
+        return SkeletonType.TableRow;
+      case LoaderType.ListItem:
+        return SkeletonType.ListItem;
+      case LoaderType.Donut:
+        return SkeletonType.Donut;
+      default:
+        return SkeletonType.Rectangle;
+    }
+  }
 }