Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Specify lazy loading for avatars (#10866)
Browse files Browse the repository at this point in the history
* Specify lazy loading for avatars

so browser doesn't fetch eagerly if off-screen

* Update snapshots
  • Loading branch information
t3chguy authored May 11, 2023
1 parent 73007d6 commit 2cee8a4
Show file tree
Hide file tree
Showing 19 changed files with 44 additions and 4 deletions.
2 changes: 2 additions & 0 deletions src/components/views/avatars/BaseAvatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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=""
Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
/>
Expand All @@ -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;"
/>
Expand All @@ -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;"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/messages/TextualBody-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>"`,
);
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand All @@ -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"
Expand All @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
/>
Expand Down Expand Up @@ -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;"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
/>
Expand Down
6 changes: 3 additions & 3 deletions test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap

Large diffs are not rendered by default.

0 comments on commit 2cee8a4

Please sign in to comment.