feat(design): implement skeleton UI for DaffImageComponent (#2207)

apps/design-land/src/app/image/image.component.html

@@ -26,5 +26,8 @@ <h2>Usage</h2>
 <h3>Basic Image</h3>
 <design-land-example-viewer-container example="basic-image"></design-land-example-viewer-container>
 
+<h3>Skeleton Image</h3>
+<design-land-example-viewer-container example="skeleton-image"></design-land-example-viewer-container>
+
 <h3>Image Load Output</h3>
 <design-land-example-viewer-container example="load-image"></design-land-example-viewer-container>

libs/design/image/examples/src/public_api.ts

@@ -4,8 +4,11 @@ import { BasicImageComponent } from './basic-image/basic-image.component';
 import { BasicImageModule } from './basic-image/basic-image.module';
 import { LoadImageComponent } from './load-image/load-image.component';
 import { LoadImageModule } from './load-image/load-image.module';
+import { SkeletonImageComponent } from './skeleton-image/skeleton-image.component';
+import { SkeletonImageModule } from './skeleton-image/skeleton-image.module';
 
 export const IMAGE_EXAMPLES: ComponentExample[] = [
   { component: BasicImageComponent, module: BasicImageModule },
   { component: LoadImageComponent, module: LoadImageModule },
+  { component: SkeletonImageComponent, module: SkeletonImageModule },
 ];

libs/design/image/examples/src/skeleton-image/skeleton-image.component.html

@@ -0,0 +1,6 @@
+<daff-image [skeleton]="true"
+	src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
+	alt="Bottom up view of Basel exhibition centre"
+	width="1261"
+	height="946">
+</daff-image>

libs/design/image/examples/src/skeleton-image/skeleton-image.component.ts

@@ -0,0 +1,14 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'skeleton-image',
+  templateUrl: './skeleton-image.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SkeletonImageComponent {
+
+}

libs/design/image/examples/src/skeleton-image/skeleton-image.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+
+import { DaffImageModule } from '@daffodil/design';
+
+import { SkeletonImageComponent } from './skeleton-image.component';
+
+@NgModule({
+  declarations: [
+    SkeletonImageComponent,
+  ],
+  exports: [
+    SkeletonImageComponent,
+  ],
+  imports: [
+    DaffImageModule,
+  ],
+})
+export class SkeletonImageModule { }

libs/design/src/atoms/image/image.component.scss

@@ -1,9 +1,19 @@
+@use 'state';
+
 :host {
 	display: inline-block;
 	border-radius: inherit;
 	position: relative;
 	width: 100%;
 
+	&.daff-skeleton {
+		@include state.skeleton-screen(100%, 100%);
+
+		img {
+			opacity: 0;
+		}
+	}
+
 	img {
 		position: absolute;
 		left: 0;

libs/design/src/atoms/image/image.component.spec.ts

@@ -12,14 +12,15 @@ import { By } from '@angular/platform-browser';
 import { DaffImageComponent } from './image.component';
 
 @Component({
-  template: `<daff-image [src]="src" [alt]="alt" [width]="width" [height]="height"></daff-image>`,
+  template: `<daff-image [src]="src" [alt]="alt" [width]="width" [height]="height" [skeleton]="skeleton"></daff-image>`,
 })
 
 class WrapperComponent {
   src = 'assets/image.svg';
   alt = 'image';
   width = 100;
   height = 100;
+  skeleton = false;
 }
 
 describe('DaffImageComponent', () => {
@@ -81,6 +82,10 @@ describe('DaffImageComponent', () => {
     expect(component.height).toEqual(100);
   });
 
+  it('should be able to take `skeleton` as an input', () => {
+    expect(component.skeleton).toEqual(wrapper.skeleton);
+  });
+
   it('should throw an error when src is invalid', () => {
     wrapper.src = '';
     expect(() => fixture.detectChanges()).toThrowError(/src/);

libs/design/src/atoms/image/image.component.ts

@@ -3,12 +3,18 @@ import {
   ChangeDetectionStrategy,
   Input,
   EventEmitter,
+  OnInit,
+  ElementRef,
+  Renderer2,
   Output,
   HostBinding,
-  OnInit,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+import {
+  daffSkeletonableMixin,
+  DaffSkeletonable,
+} from '../../core/skeletonable/public_api';
 import { daffThumbnailCompatToken } from '../../molecules/media-gallery/public_api';
 
 const validateProperty = (object: Record<string, any>, prop: string) => {
@@ -32,6 +38,15 @@ const validateProperties = (object: Record<string, any>, props: string[]) => {
   }
 };
 
+/**
+ * An _elementRef is needed for the GolfGhostable mixin
+ */
+class DaffImageBase {
+  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) { }
+}
+
+const _daffImageBase = daffSkeletonableMixin(DaffImageBase);
+
 @Component({
   selector: 'daff-image',
   templateUrl: './image.component.html',
@@ -43,8 +58,11 @@ const validateProperties = (object: Record<string, any>, props: string[]) => {
 			 provide: daffThumbnailCompatToken, useExisting: DaffImageComponent,
     },
   ],
+  // todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['skeleton'],
 })
-export class DaffImageComponent implements OnInit {
+export class DaffImageComponent extends _daffImageBase implements OnInit, DaffSkeletonable {
 
   private _src: string;
 
@@ -101,7 +119,13 @@ export class DaffImageComponent implements OnInit {
 	  validateProperties(this, ['src', 'alt', 'width', 'height']);
   }
 
-  constructor(private sanitizer: DomSanitizer) {}
+  constructor(
+    private sanitizer: DomSanitizer,
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+  ) {
+	  super(elementRef, renderer);
+  }
 
   /**
    * @docs-private