Avatar: support lazy loading of image (#3727)

apps/cookbook/src/app/examples/avatar-example/avatar-example.component.html

@@ -17,4 +17,9 @@ <h2>Avatar with badge</h2>
 
 <h2>Avatar with image</h2>
 <cookbook-avatar-example-image></cookbook-avatar-example-image>
+<h3>Sizes</h3>
 <cookbook-avatar-example-image-size></cookbook-avatar-example-image-size>
+<h3>Lazy loaded image</h3>
+<cookbook-avatar-example-image-loazy-loading></cookbook-avatar-example-image-loazy-loading>
+<h3>Fallback image</h3>
+<cookbook-avatar-example-image-error></cookbook-avatar-example-image-error>

apps/cookbook/src/app/examples/avatar-example/avatar-example.module.ts

@@ -14,6 +14,7 @@ import { AvatarExampleBadgeComponent } from './examples/badge';
 import { AvatarExampleImageComponent } from './examples/image';
 import { AvatarExampleImageSizeComponent } from './examples/image-sizes';
 import { AvatarExampleImageErrorComponent } from './examples/image-error';
+import { AvatarExampleImageLazyLoadingComponent } from './examples/image-lazy-loading';
 
 const COMPONENT_DECLARATIONS = [
   AvatarExampleComponent,
@@ -25,6 +26,7 @@ const COMPONENT_DECLARATIONS = [
   AvatarExampleImageComponent,
   AvatarExampleImageSizeComponent,
   AvatarExampleImageErrorComponent,
+  AvatarExampleImageLazyLoadingComponent,
 ];
 
 @NgModule({

apps/cookbook/src/app/examples/avatar-example/examples/image-lazy-loading.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-avatar-example-image-loazy-loading',
+  template: `<kirby-avatar imageSrc="/assets/images/woman.png" imageLoading="lazy" size="lg"></kirby-avatar>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+  styleUrls: ['./avatar-examples.shared.scss'],
+})
+export class AvatarExampleImageLazyLoadingComponent {
+  template: string = config.template;
+}

apps/cookbook/src/app/showcase/avatar-showcase/avatar-showcase.component.html

@@ -28,11 +28,33 @@ <h2>Avatar with image</h2>
   <cookbook-example-viewer [html]="imageExample.template">
     <cookbook-avatar-example-image #imageExample></cookbook-avatar-example-image>
   </cookbook-example-viewer>
+  <h3>Sizes</h3>
   <cookbook-example-viewer [html]="imageSizeExample.template">
     <cookbook-avatar-example-image-size #imageSizeExample></cookbook-avatar-example-image-size>
   </cookbook-example-viewer>
 
-  <h2>Avatar with fallback image</h2>
+  <h3>Lazy loaded image</h3>
+  <p>
+    If you want to defer the loading of the avatar image set
+    <code>imageLoading="lazy"</code>
+    .
+  </p>
+  <p>
+    <a
+      class="kirby-external-icon"
+      target="_blank"
+      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading"
+    >
+      Read more about lazy loading images on MDN
+    </a>
+  </p>
+  <cookbook-example-viewer [html]="imageLazyLoadingExample.template">
+    <cookbook-avatar-example-image-loazy-loading
+      #imageLazyLoadingExample
+    ></cookbook-avatar-example-image-loazy-loading>
+  </cookbook-example-viewer>
+
+  <h3>Fallback image</h3>
   <p>
     The image avatar will emit an
     <code>ErrorEvent</code>

apps/cookbook/src/app/showcase/avatar-showcase/avatar-showcase.component.ts

@@ -10,25 +10,32 @@ import { ApiDescriptionProperty } from '~/app/shared/api-description/api-descrip
 })
 export class AvatarShowcaseComponent {
   properties: ApiDescriptionProperty[] = [
-    {
-      name: 'imageSrc',
-      description: 'Points to the src of the image location',
-      defaultValue: 'null',
-      type: ['string'],
-    },
     {
       name: 'size',
       description: 'Sets the size of the avatar.',
       defaultValue: AvatarSize.SM,
       type: Object.values(AvatarSize),
     },
+    {
+      name: 'imageSrc',
+      description: 'The path to the image you want to embed in the avatar.',
+      defaultValue: 'undefined',
+      type: ['string'],
+    },
     {
       name: 'altText',
       description:
-        'Must be filled out - its the alt text attribute that screenreaders use when "viewing" the image.',
-      defaultValue: 'null',
+        'The alt text attribute that screenreaders use when "viewing" the image. Mandatory when using the avatar with an image.',
+      defaultValue: 'undefined',
       type: ['string'],
     },
+    {
+      name: 'imageLoading',
+      description:
+        'Sets the loading attribute of the image.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading',
+      defaultValue: 'undefined',
+      type: ['eager', 'lazy'],
+    },
     {
       name: 'overlay',
       description:

libs/designsystem/avatar/src/avatar.component.html

@@ -1,5 +1,11 @@
 <div class="avatar" [ngClass]="{ overlay: overlay, stroke: stroke }">
-  <img *ngIf="imageSrc" [src]="imageSrc" [attr.alt]="altText" (error)="onImageError($event)" />
+  <img
+    *ngIf="imageSrc"
+    [src]="imageSrc"
+    [attr.alt]="altText"
+    [attr.loading]="imageLoading"
+    (error)="onImageError($event)"
+  />
   <ng-content *ngIf="!text" select="kirby-icon"></ng-content>
   <span class="avatar-text" *ngIf="text">{{ text }}</span>
 </div>

libs/designsystem/avatar/src/avatar.component.spec.ts

@@ -33,7 +33,7 @@ describe('AvatarComponent', () => {
     expect(spectator.component).toBeTruthy();
   });
 
-  it('should render with correct default colors', async () => {
+  it('should render with correct default colors', () => {
     spectator = createHost(`
     <kirby-avatar>
       <kirby-icon name="qr"></kirby-icon>
@@ -47,23 +47,70 @@ describe('AvatarComponent', () => {
     });
   });
 
-  it('should emit error when rendering avatar with invalid image source', async () => {
-    spectator = createHost(`
-      <kirby-avatar imageSrc="failingSrc.png"></kirby-avatar>
-    `);
-    spyOn(spectator.component.imageError, 'emit');
-
-    let errorEvent: ErrorEvent;
-    const img = spectator.query<HTMLImageElement>('img');
-    const waitForImageError = new Promise<HTMLImageElement>((resolve) => {
-      img.addEventListener('error', (ev) => {
-        errorEvent = ev;
-        resolve(img);
+  describe('when rendering Avatar with imageSrc set', () => {
+    describe('by default', () => {
+      beforeEach(() => {
+        spectator = createHost(`
+        <kirby-avatar imageSrc="/assets/images/woman.png"></kirby-avatar>`);
+      });
+
+      it('should render image', () => {
+        const img = spectator.query<HTMLImageElement>('img');
+        expect(img).toExist();
+      });
+
+      it('should render image with configured imageSrc', () => {
+        const img = spectator.query<HTMLImageElement>('img');
+        expect(img.src.endsWith('/assets/images/woman.png')).toBeTrue();
+      });
+
+      it('should not set alt attribute on img when altText is not set', () => {
+        const img = spectator.query<HTMLImageElement>('img');
+        expect(img).not.toHaveAttribute('alt');
+      });
+
+      it('should not set loading attribute on img when imageLoading is not set', () => {
+        const img = spectator.query<HTMLImageElement>('img');
+        expect(img).not.toHaveAttribute('loading');
       });
     });
-    await waitForImageError;
 
-    expect(spectator.component.imageError.emit).toHaveBeenCalledOnceWith(errorEvent);
+    it('should set alt attribute on image when altText is set', () => {
+      spectator = createHost(`
+        <kirby-avatar imageSrc="/assets/images/woman.png" altText="Test"></kirby-avatar>
+      `);
+
+      const img = spectator.query<HTMLImageElement>('img');
+      expect(img).toHaveAttribute('alt', 'Test');
+    });
+
+    it('should defer loading of image when imageLoading="lazy"', () => {
+      spectator = createHost(`
+        <kirby-avatar imageSrc="/assets/images/woman.png" imageLoading="lazy"></kirby-avatar>
+      `);
+
+      const img = spectator.query<HTMLImageElement>('img');
+      expect(img).toHaveAttribute('loading', 'lazy');
+    });
+
+    it('should emit error when rendering avatar with invalid image source', async () => {
+      spectator = createHost(`
+        <kirby-avatar imageSrc="failingSrc.png"></kirby-avatar>
+      `);
+      spyOn(spectator.component.imageError, 'emit');
+
+      let errorEvent: ErrorEvent;
+      const img = spectator.query<HTMLImageElement>('img');
+      const waitForImageError = new Promise<HTMLImageElement>((resolve) => {
+        img.addEventListener('error', (ev) => {
+          errorEvent = ev;
+          resolve(img);
+        });
+      });
+      await waitForImageError;
+
+      expect(spectator.component.imageError.emit).toHaveBeenCalledOnceWith(errorEvent);
+    });
   });
 
   describe('when rendering Avatar within Progress Circle', () => {

libs/designsystem/avatar/src/avatar.component.ts

@@ -27,6 +27,7 @@ export enum AvatarSize {
 })
 export class AvatarComponent {
   @Input() imageSrc: string;
+  @Input() imageLoading: 'eager' | 'lazy' | undefined;
   @Input() altText: string;
   @Input() stroke: boolean;
   @Input() text: string;

libs/designsystem/karma.conf.js

@@ -18,16 +18,23 @@ module.exports = function (config) {
     reporters: ['kjhtml', 'junit', 'spec'],
     files: [
       {
-        pattern: './src/lib/icons/svg/*.svg',
-        type: 'dom',
+        pattern: './icon/src/icons/svg/*.svg',
         watched: false,
-        include: false,
+        included: false,
+        served: true,
+        nocache: false,
+      },
+      {
+        pattern: './testing/images/*.png',
+        watched: false,
+        included: false,
         served: true,
         nocache: false,
       },
     ],
     proxies: {
-      '/assets/kirby/icons/svg/': '/base/src/lib/icons/svg/',
+      '/assets/images/': '/base/testing/images/',
+      '/assets/kirby/icons/svg/': '/base/icon/src/icons/svg/',
       '/svg/': '/base/src/lib/icons/svg/',
     },
   });