feat: Skeleton loader for LoadAsync directive

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,13 @@ export type AsyncState = LoadingAsyncState | SuccessAsyncState | NoDataOrErrorAs
 export const enum LoaderType {
   Spinner = 'spinner',
   ExpandableRow = 'expandable-row',
-  Page = 'page'
+  Page = 'page',
+  Rectangle = 'rectangle',
+  RectangleText = 'rectangle-text',
+  Square = 'square',
+  Circle = 'circle',
+  TableRow = 'table-row',
+  ListItem = 'list-item'
 }
 
 interface LoadingAsyncState {
@@ -80,6 +86,7 @@ interface NoDataOrErrorAsyncState {
 
 interface LoadingStateConfig {
   loaderType?: LoaderType;
+  repeatCount?: number;
 }
 
 interface NoDataOrErrorStateConfig {

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.ts

@@ -1,25 +1,39 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { ImagesAssetPath } from '@hypertrace/assets-library';
+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.oldLoaderType() }">
+      <ng-container *ngIf="!this.oldLoaderType(); else oldLoader">
+        <ht-skeleton [shapeStyle]="this.skeletonType" [repeat]="this.repeatLoaderCount"></ht-skeleton>
+      </ng-container>
+
+      <ng-template #oldLoader>
+        <img [ngClass]="[this.currentLoaderType]" [src]="this.getImagePathFromType(this.currentLoaderType)" />
+      </ng-template>
     </div>
   `
 })
 export class LoaderComponent implements OnChanges {
   @Input()
   public loaderType?: LoaderType;
 
+  @Input()
+  public repeatLoaderCount?: number;
+
+  public skeletonType: SkeletonType = SkeletonType.Rectangle;
+
   public currentLoaderType: LoaderType = LoaderType.Spinner;
 
   public ngOnChanges(): void {
     this.currentLoaderType = this.loaderType ?? LoaderType.Spinner;
+
+    this.skeletonType = this.loaderToSkeletonTypeMap(this.currentLoaderType);
   }
 
   public getImagePathFromType(loaderType: LoaderType): ImagesAssetPath {
@@ -33,4 +47,29 @@ export class LoaderComponent implements OnChanges {
         return ImagesAssetPath.LoaderSpinner;
     }
   }
+
+  public loaderToSkeletonTypeMap(curLoaderType: LoaderType): SkeletonType {
+    switch (curLoaderType) {
+      case LoaderType.RectangleText:
+        return SkeletonType.RectangleText;
+      case LoaderType.Circle:
+        return SkeletonType.Circle;
+      case LoaderType.Square:
+        return SkeletonType.Square;
+      case LoaderType.TableRow:
+        return SkeletonType.TableRow;
+      case LoaderType.ListItem:
+        return SkeletonType.ListItem;
+      default:
+        return SkeletonType.Rectangle;
+    }
+  }
+
+  public oldLoaderType(): boolean {
+    return (
+      this.currentLoaderType === LoaderType.ExpandableRow ||
+      this.currentLoaderType === LoaderType.Spinner ||
+      this.currentLoaderType === LoaderType.Page
+    );
+  }
 }

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

@@ -14,7 +14,7 @@ export const ASYNC_WRAPPER_PARAMETERS$ = new InjectionToken<Observable<LoadAsync
   template: `
     <div *ngIf="this.state$ | async as state" class="fill-container" [ngSwitch]="state.type">
       <ng-container *ngSwitchCase="'${LoadAsyncStateType.Loading}'">
-        <ht-loader [loaderType]="this.loaderType"></ht-loader>
+        <ht-loader [loaderType]="this.loaderType" [repeatLoaderCount]="this.config?.load?.repeatCount"></ht-loader>
       </ng-container>
       <ng-container *ngSwitchCase="'${LoadAsyncStateType.Success}'">
         <ng-container *ngTemplateOutlet="this.content; context: state.context"></ng-container>

projects/components/src/skeleton/skeleton.component.scss

@@ -0,0 +1,114 @@
+@mixin loading-animation {
+  content: '';
+  animation: skeleton-animation 1.2s infinite;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translateX(-100%);
+  z-index: 1;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
+}
+
+@mixin initial-location {
+  top: initial;
+  left: initial;
+  transform: initial;
+}
+
+.skeleton {
+  position: relative;
+  background-color: #dee2e6;
+  overflow: hidden;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  border-radius: 6px;
+}
+
+.skeleton::after {
+  @include loading-animation;
+}
+
+.skeleton.skeleton-rectangle {
+  height: 80%;
+  width: 80%;
+}
+
+.skeleton.skeleton-rectangle-text {
+  height: 1.3rem;
+  width: 90%;
+}
+
+.skeleton.skeleton-circle {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+}
+
+.skeleton.skeleton-square {
+  width: 3rem;
+  height: 3rem;
+}
+
+.skeleton.skeleton-table-row {
+  height: 1.3rem;
+  width: 90%;
+
+  @include initial-location;
+}
+
+.skeleton.skeleton-repeating {
+  margin-top: 1rem;
+}
+
+.skeleton.skeleton-list-item {
+  background-color: rgb(255, 255, 255);
+  @include initial-location;
+  display: flex;
+  justify-content: flex-start;
+
+  .item-circle {
+    background-color: #dee2e6;
+    height: 2rem;
+    width: 2rem;
+    border-radius: 50%;
+  }
+  .item-circle::after {
+    @include loading-animation;
+  }
+
+  .item-column {
+    display: flex;
+    flex-direction: column;
+    padding-left: 1rem;
+    width: 100%;
+  }
+
+  .item-column > div {
+    background-color: #dee2e6;
+    height: 0.9rem;
+    border-radius: 6px;
+    width: 90%;
+
+    &:last-child {
+      margin-top: 5px;
+      width: 80%;
+    }
+  }
+  .item-column > div::after {
+    @include loading-animation;
+  }
+}
+
+@keyframes skeleton-animation {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}

projects/components/src/skeleton/skeleton.component.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+interface ContainerClass {
+  skeleton: boolean;
+  'skeleton-rectangle': boolean;
+  'skeleton-square': boolean;
+  'skeleton-circle': boolean;
+  'skeleton-rectangle-text': boolean;
+  'skeleton-table-row': boolean;
+  'skeleton-list-item': boolean;
+  'skeleton-repeating': boolean;
+}
+
+export const enum SkeletonType {
+  Rectangle = 'rectangle',
+  RectangleText = 'rectangle-text',
+  Square = 'square',
+  Circle = 'circle',
+  TableRow = 'table-row',
+  ListItem = 'list-item'
+}
+
+@Component({
+  selector: 'ht-skeleton',
+  template: `
+    <ng-container *ngFor="let k of [].constructor(this.repeat)">
+      <ng-container [ngSwitch]="this.shapeStyle">
+        <div *ngSwitchCase="'${SkeletonType.RectangleText}'" [ngClass]="containerClass()"></div>
+        <div *ngSwitchCase="'${SkeletonType.Circle}'" [ngClass]="containerClass()"></div>
+        <div *ngSwitchCase="'${SkeletonType.Square}'" [ngClass]="containerClass()"></div>
+        <div *ngSwitchCase="'${SkeletonType.TableRow}'" [ngClass]="containerClass()"></div>
+        <div *ngSwitchCase="'${SkeletonType.ListItem}'" [ngClass]="containerClass()">
+          <div class="item-circle"></div>
+          <div class="item-column">
+            <div class="line-one"></div>
+            <div class="line-two"></div>
+          </div>
+        </div>
+        <div *ngSwitchDefault class="skeleton skeleton-rectangle"></div>
+      </ng-container>
+    </ng-container>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./skeleton.component.scss']
+})
+export class SkeletonComponent {
+  @Input() public shapeStyle: SkeletonType = SkeletonType.Rectangle;
+
+  @Input() public repeat: number = 1;
+
+  @Input() public size: string = '';
+
+  public containerClass(): ContainerClass {
+    return {
+      skeleton: true,
+      'skeleton-rectangle': this.shapeStyle === 'rectangle',
+      'skeleton-square': this.shapeStyle === 'square',
+      'skeleton-circle': this.shapeStyle === 'circle',
+      'skeleton-rectangle-text': this.shapeStyle === 'rectangle-text',
+      'skeleton-table-row': this.shapeStyle === 'table-row',
+      'skeleton-list-item': this.shapeStyle === 'list-item',
+      'skeleton-repeating': this.repeat > 1
+    };
+  }
+}

projects/components/src/skeleton/skeleton.module.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SkeletonComponent } from './skeleton.component';
+
+@NgModule({
+  declarations: [SkeletonComponent],
+  imports: [CommonModule],
+  exports: [SkeletonComponent]
+})
+export class SkeletonModule {}