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

Specify lazy loading for avatars #10866

Merged
merged 2 commits into from
May 11, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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

Large diffs are not rendered by default.