Add loading attribute to `sl-avatar` (#1006)

docs/components/avatar.md

@@ -19,12 +19,18 @@ const App = () => <SlAvatar label="User avatar" />;
 ### Images
 
 To use an image for the avatar, set the `image` and `label` attributes. This will take priority and be shown over initials and icons.
+To lazy load an image you can use the `loading` attribute and set it to `lazy`.
 
 ```html preview
 <sl-avatar
   image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
   label="Avatar of a gray tabby kitten looking down"
 ></sl-avatar>
+<sl-avatar
+  image="https://images.unsplash.com/photo-1591871937573-74dbba515c4c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+  label="Avatar of a white and grey kitten on grey textile"
+  loading="lazy"
+></sl-avatar>
 ```
 
 ```jsx react
@@ -35,6 +41,11 @@ const App = () => (
     image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
     label="Avatar of a gray tabby kitten looking down"
   />
+  <SlAvatar
+    image="https://images.unsplash.com/photo-1591871937573-74dbba515c4c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+    label="Avatar of a white and grey kitten on grey textile"
+    loading="lazy"
+  />
 );
 ```
 

src/components/avatar/avatar.ts

@@ -39,6 +39,9 @@ export default class SlAvatar extends ShoelaceElement {
   /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
   @property() initials = '';
 
+  /** Indicates how the browser should load the image. */
+  @property() loading: 'eager' | 'lazy' = 'eager';
+
   /** The shape of the avatar. */
   @property({ reflect: true }) shape: 'circle' | 'square' | 'rounded' = 'circle';
 
@@ -76,6 +79,7 @@ export default class SlAvatar extends ShoelaceElement {
                 part="image"
                 class="avatar__image"
                 src="${this.image}"
+                loading="${this.loading}"
                 alt=""
                 @error="${() => (this.hasError = true)}"
               />