mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-23 03:05:45 +03:00
Code Issues Projects Releases Packages Wiki Activity

Specify lazy loading for avatars (#10866)

Browse source 
* Specify lazy loading for avatars

so browser doesn't fetch eagerly if off-screen

* Update snapshots
This commit is contained in:
Michael Telatynski 2023-05-11 19:29:48 +01:00 committed by GitHub
parent 73007d6dd6
commit 2cee8a4b01
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 44 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/avatars/BaseAvatar.tsx
View file

@ -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}

1
test/components/structures/__snapshots__/MessagePanel-test.tsx.snap
View file

@ -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"

7
test/components/structures/__snapshots__/RoomView-test.tsx.snap
View file

@ -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;"
/>

2
test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
View file

@ -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;"
/>

1
test/components/structures/__snapshots__/UserMenu-test.tsx.snap
View file

@ -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;"
/>

3
test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
View file

@ -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;"
/>

1
test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
View file

@ -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"

1
test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
View file

@ -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"

1
test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
View file

@ -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

8
test/components/views/elements/__snapshots__/Pill-test.tsx.snap
View file

@ -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;"
/>

2
test/components/views/messages/TextualBody-test.tsx
View file

@ -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>"`,
);
});

1
test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
View file

@ -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"

6
test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
View file

@ -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"

1
test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
View file

@ -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;"
/>

1
test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
View file

@ -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;"
/>

2
test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
View file

@ -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;"
/>

1
test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
View file

@ -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;"
/>

1
test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
View file

@ -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;"
/>

6
test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
View file

File diff suppressed because one or more lines are too long