Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Specify lazy loading for avatars #10866

Merged
merged 2 commits into from
May 11, 2023
Merged

Specify lazy loading for avatars #10866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
24083c6
Specify lazy loading for avatars
t3chguy May 11, 2023
d90b4a0
Update snapshots
t3chguy May 11, 2023
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
View file
Open in desktop
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
1 change: 1 addition & 0 deletions test/components/structures/__snapshots__/MessagePanel-test.tsx.snap
View file
Open in desktop
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
7 changes: 7 additions & 0 deletions test/components/structures/__snapshots__/RoomView-test.tsx.snap
View file
Open in desktop
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
2 changes: 2 additions & 0 deletions test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
View file
Open in desktop
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
1 change: 1 addition & 0 deletions test/components/structures/__snapshots__/UserMenu-test.tsx.snap
View file
Open in desktop
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
3 changes: 3 additions & 0 deletions test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
View file
Open in desktop
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
1 change: 1 addition & 0 deletions test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
View file
Open in desktop
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
1 change: 1 addition & 0 deletions test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
View file
Open in desktop
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
1 change: 1 addition & 0 deletions test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
View file
Open in desktop
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
8 changes: 8 additions & 0 deletions test/components/views/elements/__snapshots__/Pill-test.tsx.snap
View file
Open in desktop
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
View file
Open in desktop
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
1 change: 1 addition & 0 deletions test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
View file
Open in desktop
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
6 changes: 6 additions & 0 deletions test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
View file
Open in desktop
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
1 change: 1 addition & 0 deletions test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
View file
Open in desktop
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
1 change: 1 addition & 0 deletions test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
View file
Open in desktop
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
2 changes: 2 additions & 0 deletions test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
View file
Open in desktop
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
1 change: 1 addition & 0 deletions test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
View file
Open in desktop
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
1 change: 1 addition & 0 deletions test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
View file
Open in desktop
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
View file
Open in desktop

Large diffs are not rendered by default.