Specify lazy loading for avatars (#10866)

* Specify lazy loading for avatars so browser doesn't fetch eagerly if off-screen * Update snapshots
matrix-org · May 11, 2023 · 2cee8a4 · 2cee8a4
1 parent 73007d6
commit 2cee8a4
Show file tree

Hide file tree

Showing 19 changed files with 44 additions and 4 deletions.
diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx
@@ -135,6 +135,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
         );
         const imgNode = (
             <img
+                loading="lazy"
                 className="mx_BaseAvatar_image"
                 src={AvatarLogic.defaultAvatarUrlForString(idName || name)}
                 alt=""
@@ -201,6 +202,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
     } else {
         return (
             <img
+                loading="lazy"
                 className={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)}
                 src={imageUrl}
                 onError={onError}

diff --git a/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap b/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap
@@ -110,6 +110,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
                     aria-hidden="true"
                     class="mx_BaseAvatar_image"
                     data-testid="avatar-img"
+                    loading="lazy"
                     src="data:image/png;base64,00"
                     style="width: 14px; height: 14px;"
                     title="@user:id"

diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -33,6 +33,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
                 aria-hidden="true"
                 class="mx_BaseAvatar_image"
                 data-testid="avatar-img"
+                loading="lazy"
                 src="data:image/png;base64,00"
                 style="width: 24px; height: 24px;"
               />
@@ -124,6 +125,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
                 aria-hidden="true"
                 class="mx_BaseAvatar_image"
                 data-testid="avatar-img"
+                loading="lazy"
                 src="data:image/png;base64,00"
                 style="width: 24px; height: 24px;"
               />
@@ -213,6 +215,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
                     aria-hidden="true"
                     class="mx_BaseAvatar_image"
                     data-testid="avatar-img"
+                    loading="lazy"
                     src="data:image/png;base64,00"
                     style="width: 52px; height: 52px;"
                   />
@@ -311,6 +314,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                 aria-hidden="true"
                 class="mx_BaseAvatar_image"
                 data-testid="avatar-img"
+                loading="lazy"
                 src="data:image/png;base64,00"
                 style="width: 24px; height: 24px;"
               />
@@ -400,6 +404,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                     aria-hidden="true"
                     class="mx_BaseAvatar_image"
                     data-testid="avatar-img"
+                    loading="lazy"
                     src="data:image/png;base64,00"
                     style="width: 52px; height: 52px;"
                   />
@@ -572,6 +577,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                 aria-hidden="true"
                 class="mx_BaseAvatar_image"
                 data-testid="avatar-img"
+                loading="lazy"
                 src="data:image/png;base64,00"
                 style="width: 24px; height: 24px;"
               />
@@ -660,6 +666,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                     aria-hidden="true"
                     class="mx_BaseAvatar_image"
                     data-testid="avatar-img"
+                    loading="lazy"
                     src="data:image/png;base64,00"
                     style="width: 52px; height: 52px;"
                   />

diff --git a/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
@@ -21,6 +21,7 @@ exports[`SpaceHierarchy <HierarchyLevel /> renders 1`] = `
             alt=""
             class="mx_BaseAvatar mx_BaseAvatar_image"
             data-testid="avatar-img"
+            loading="lazy"
             src="http://this.is.a.url/avatar.url/room.png"
             style="width: 20px; height: 20px;"
           />
@@ -97,6 +98,7 @@ exports[`SpaceHierarchy <HierarchyLevel /> renders 1`] = `
             alt=""
             class="mx_BaseAvatar mx_BaseAvatar_image"
             data-testid="avatar-img"
+            loading="lazy"
             src="http://this.is.a.url/avatar.url/room.png"
             style="width: 20px; height: 20px;"
           />

diff --git a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap
@@ -33,6 +33,7 @@ exports[`<UserMenu> when rendered should render as expected 1`] = `
             aria-hidden="true"
             class="mx_BaseAvatar_image"
             data-testid="avatar-img"
+            loading="lazy"
             src="data:image/png;base64,00"
             style="width: 32px; height: 32px;"
           />

diff --git a/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap b/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
@@ -18,6 +18,7 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
       aria-hidden="true"
       class="mx_BaseAvatar_image"
       data-testid="avatar-img"
+      loading="lazy"
       src="data:image/png;base64,00"
       style="width: 36px; height: 36px;"
     />
@@ -43,6 +44,7 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
       aria-hidden="true"
       class="mx_BaseAvatar_image"
       data-testid="avatar-img"
+      loading="lazy"
       src="data:image/png;base64,00"
       style="width: 36px; height: 36px;"
     />
@@ -68,6 +70,7 @@ exports[`RoomAvatar should render as expected for a Room 1`] = `
       aria-hidden="true"
       class="mx_BaseAvatar_image"
       data-testid="avatar-img"
+      loading="lazy"
       src="data:image/png;base64,00"
       style="width: 36px; height: 36px;"
     />

diff --git a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
@@ -26,6 +26,7 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
             aria-hidden="true"
             class="mx_BaseAvatar_image"
             data-testid="avatar-img"
+            loading="lazy"
             src="data:image/png;base64,00"
             style="width: 36px; height: 36px;"
             title="@alice:server"

diff --git a/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
@@ -47,6 +47,7 @@ exports[`<BeaconViewDialog /> renders own beacon status when user is live sharin
       aria-hidden="true"
       class="mx_BaseAvatar_image"
       data-testid="avatar-img"
+      loading="lazy"
       src="data:image/png;base64,00"
       style="width: 32px; height: 32px;"
       title="@alice:server"

diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
@@ -35,6 +35,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
           alt=""
           class="mx_BaseAvatar mx_BaseAvatar_image mx_BeaconListItem_avatar"
           data-testid="avatar-img"
+          loading="lazy"
           style="width: 32px; height: 32px;"
         />
         <div

diff --git a/test/components/views/elements/__snapshots__/Pill-test.tsx.snap b/test/components/views/elements/__snapshots__/Pill-test.tsx.snap
@@ -50,6 +50,7 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
             aria-hidden="true"
             class="mx_BaseAvatar_image"
             data-testid="avatar-img"
+            loading="lazy"
             src="data:image/png;base64,00"
             style="width: 16px; height: 16px;"
           />
@@ -91,6 +92,7 @@ exports[`<Pill> should render the expected pill for a known user not in the room
             aria-hidden="true"
             class="mx_BaseAvatar_image"
             data-testid="avatar-img"
+            loading="lazy"
             src="data:image/png;base64,00"
             style="width: 16px; height: 16px;"
           />
@@ -132,6 +134,7 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
             aria-hidden="true"
             class="mx_BaseAvatar_image"
             data-testid="avatar-img"
+            loading="lazy"
             src="data:image/png;base64,00"
             style="width: 16px; height: 16px;"
           />
@@ -173,6 +176,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
             aria-hidden="true"
             class="mx_BaseAvatar_image"
             data-testid="avatar-img"
+            loading="lazy"
             src="data:image/png;base64,00"
             style="width: 16px; height: 16px;"
           />
@@ -214,6 +218,7 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
             aria-hidden="true"
             class="mx_BaseAvatar_image"
             data-testid="avatar-img"
+            loading="lazy"
             src="data:image/png;base64,00"
             style="width: 16px; height: 16px;"
           />
@@ -255,6 +260,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
             aria-hidden="true"
             class="mx_BaseAvatar_image"
             data-testid="avatar-img"
+            loading="lazy"
             src="data:image/png;base64,00"
             style="width: 16px; height: 16px;"
           />
@@ -319,6 +325,7 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
             aria-hidden="true"
             class="mx_BaseAvatar_image"
             data-testid="avatar-img"
+            loading="lazy"
             src="data:image/png;base64,00"
             style="width: 16px; height: 16px;"
           />
@@ -360,6 +367,7 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
             aria-hidden="true"
             class="mx_BaseAvatar_image"
             data-testid="avatar-img"
+            loading="lazy"
             src="data:image/png;base64,00"
             style="width: 16px; height: 16px;"
           />

diff --git a/test/components/views/messages/TextualBody-test.tsx b/test/components/views/messages/TextualBody-test.tsx
@@ -199,7 +199,7 @@ describe("<TextualBody />", () => {
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" style="width: 16px; height: 16px;" alt="" data-testid="avatar-img" aria-hidden="true"><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
+                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><img loading="lazy" class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" style="width: 16px; height: 16px;" alt="" data-testid="avatar-img" aria-hidden="true"><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
             );
         });
 

diff --git a/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
@@ -96,6 +96,7 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
                   aria-hidden="true"
                   class="mx_BaseAvatar_image"
                   data-testid="avatar-img"
+                  loading="lazy"
                   src="data:image/png;base64,00"
                   style="width: 36px; height: 36px;"
                   title="@user:server"

diff --git a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
@@ -59,6 +59,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
           aria-hidden="true"
           class="mx_BaseAvatar mx_BaseAvatar_image"
           data-testid="avatar-img"
+          loading="lazy"
           src="mxc://avatar.url/image.png"
           style="width: 16px; height: 16px;"
         />
@@ -95,6 +96,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
               aria-hidden="true"
               class="mx_BaseAvatar mx_BaseAvatar_image"
               data-testid="avatar-img"
+              loading="lazy"
               src="mxc://avatar.url/room.png"
               style="width: 16px; height: 16px;"
             />
@@ -133,6 +135,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
               aria-hidden="true"
               class="mx_BaseAvatar mx_BaseAvatar_image"
               data-testid="avatar-img"
+              loading="lazy"
               src="mxc://avatar.url/room.png"
               style="width: 16px; height: 16px;"
             />
@@ -230,6 +233,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
           aria-hidden="true"
           class="mx_BaseAvatar mx_BaseAvatar_image"
           data-testid="avatar-img"
+          loading="lazy"
           src="mxc://avatar.url/image.png"
           style="width: 16px; height: 16px;"
         />
@@ -253,6 +257,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
       href="https://matrix.to/#/!room1:example.com/%event_id%"
       aria-describedby="mx_Pill_0.123456"
       ><img
+        loading="lazy"
         class="mx_BaseAvatar mx_BaseAvatar_image"
         src="mxc://avatar.url/image.png"
         style="width: 16px; height: 16px"
@@ -275,6 +280,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
       href="https://matrix.to/#/!room2:example.com/%event_id%"
       aria-describedby="mx_Pill_0.123456"
       ><img
+        loading="lazy"
         class="mx_BaseAvatar mx_BaseAvatar_image"
         src="mxc://avatar.url/room.png"
         style="width: 16px; height: 16px"

diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
@@ -35,6 +35,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             aria-hidden="true"
             class="mx_BaseAvatar_image"
             data-testid="avatar-img"
+            loading="lazy"
             src="data:image/png;base64,00"
             style="width: 54px; height: 54px;"
           />

diff --git a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
@@ -112,6 +112,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
                 aria-hidden="true"
                 class="mx_BaseAvatar_image"
                 data-testid="avatar-img"
+                loading="lazy"
                 src="data:image/png;base64,00"
                 style="width: 460.79999999999995px; height: 460.79999999999995px;"
               />

diff --git a/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
@@ -174,6 +174,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
         aria-hidden="true"
         class="mx_BaseAvatar_image"
         data-testid="avatar-img"
+        loading="lazy"
         src="data:image/png;base64,00"
         style="width: 36px; height: 36px;"
       />
@@ -249,6 +250,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
         aria-hidden="true"
         class="mx_BaseAvatar_image"
         data-testid="avatar-img"
+        loading="lazy"
         src="data:image/png;base64,00"
         style="width: 36px; height: 36px;"
       />

diff --git a/test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
@@ -28,6 +28,7 @@ exports[`RoomTile should render the room 1`] = `
           aria-hidden="true"
           class="mx_BaseAvatar_image"
           data-testid="avatar-img"
+          loading="lazy"
           src="data:image/png;base64,00"
           style="width: 32px; height: 32px;"
         />

diff --git a/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap b/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
@@ -28,6 +28,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
             alt=""
             class="mx_BaseAvatar mx_BaseAvatar_image mx_RoomAvatar_isSpaceRoom"
             data-testid="avatar-img"
+            loading="lazy"
             src="http://this.is.a.url/avatar.url/room.png"
             style="width: 40px; height: 40px;"
           />

diff --git a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap