fix(avatar): Lazy load avatar images (#2833)

Add `loading="lazy"` to the Avatar image element. Fixes: #2832 [category:Components]
Workday · Jul 18, 2024 · 714bc8e · 714bc8e
1 parent bea3e7c
commit 714bc8e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
@@ -184,6 +184,7 @@ export const Avatar: AvatarOverload = React.forwardRef(
               onLoad={loadImage}
               isLoaded={imageLoaded}
               objectFit={objectFit}
+              loading="lazy"
             />
           </StyledStack>
         )}

diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
@@ -69,6 +69,16 @@ storiesOf('Components/Indicators/Avatar', module)
       <h3>Using a Square Image</h3>
       <Avatar as="div" size={200} url="https://placekitten.com/g/450/450" />
     </div>
+  ))
+  .add('Lazy Loading', () => (
+    <div className="story">
+      {Array.from({length: 100}, (v, index) => (
+        <>
+          <Avatar as="div" size={Avatar.Size.xs} url={testAvatar + '?v=' + index} />
+          <br />
+        </>
+      ))}
+    </div>
   ));
 
 storiesOf('Components/Indicators/Avatar/Avatar Button', module)