Merge branch 'ph/lazyLoadAvatarsOnDiffs' into 'master'

Lazy load avatars in diffs

See merge request gitlab-org/gitlab!67142

app/assets/javascripts/diffs/components/diff_gutter_avatars.vue

@@ -75,6 +75,7 @@ export default {
         :key="note.id"
         :img-src="note.author.avatar_url"
         :tooltip-text="getTooltipText(note)"
+        lazy
         class="diff-comment-avatar js-diff-comment-avatar"
         @click.native="$emit('toggleLineDiscussions')"
       />

app/assets/javascripts/notes/components/noteable_note.vue

@@ -392,6 +392,7 @@ export default {
         :img-src="author.avatar_url"
         :img-alt="author.name"
         :img-size="40"
+        lazy
       >
         <template #avatar-badge>
           <slot name="avatar-badge"></slot>

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue

@@ -30,6 +30,11 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    lazy: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     linkHref: {
       type: String,
       required: false,
@@ -91,6 +96,7 @@ export default {
       :size="imgSize"
       :tooltip-text="avatarTooltipText"
       :tooltip-placement="tooltipPlacement"
+      :lazy="lazy"
     >
       <slot></slot> </user-avatar-image
     ><span

spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js

@@ -104,4 +104,15 @@ describe('User Avatar Link Component', () => {
       );
     });
   });
+
+  describe('lazy', () => {
+    it('passes lazy prop to avatar image', () => {
+      createWrapper({
+        username: '',
+        lazy: true,
+      });
+
+      expect(wrapper.find(UserAvatarImage).props('lazy')).toBe(true);
+    });
+  });
 });