Use loading="lazy" in more places.

i18n invites page.
Polish the bans page.
This commit is contained in:
Paul
2021-07-24 17:01:50 +01:00
parent ca975aae7b
commit dbaf246c27
15 changed files with 142 additions and 41 deletions

View File

@@ -67,6 +67,7 @@ export default function AgeGate(props: Props) {
return (
<Base>
<img
loading="eager"
src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
draggable={false}
/>

View File

@@ -55,6 +55,7 @@ export default function Emoji({
return (
<img
alt={emoji}
loading="lazy"
className="emoji"
draggable={false}
src={parseEmoji(emoji)}
@@ -66,7 +67,7 @@ export default function Emoji({
}
export function generateEmoji(emoji: string) {
return `<img class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(
return `<img loading="lazy" class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(
emoji,
)}" />`;
}

View File

@@ -168,7 +168,7 @@ function FileEntry({
return (
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
<PreviewBox onClick={remove}>
<img class="icon" src={url} alt={file.name} />
<img class="icon" src={url} alt={file.name} loading="eager" />
<div class="overlay">
<XCircle size={36} />
</div>

View File

@@ -97,6 +97,7 @@ export function TypingIndicator({ typing }: Props) {
<div className="avatars">
{users.map((user) => (
<img
loading="eager"
src={client.users.getAvatarURL(
user._id,
{ max_side: 256 },

View File

@@ -91,6 +91,7 @@ export default function Embed({ embed }: Props) {
<div className={styles.siteinfo}>
{embed.icon_url && (
<img
loading="lazy"
className={styles.favicon}
src={client.proxyFile(embed.icon_url)}
draggable={false}

View File

@@ -143,7 +143,9 @@ function HomeSidebar(props: Props) {
})
}
/>
{channelsArr.length === 0 && <img src={placeholderSVG} />}
{channelsArr.length === 0 && (
<img src={placeholderSVG} loading="eager" />
)}
{channelsArr.map((x) => {
let user;
if (x.channel_type === "DirectMessage") {

View File

@@ -144,7 +144,9 @@ export function GroupMemberSidebar({
}
/>
}>
{members.length === 0 && <img src={placeholderSVG} />}
{members.length === 0 && (
<img src={placeholderSVG} loading="eager" />
)}
{members.map(
(user) =>
user && (
@@ -257,7 +259,9 @@ export function ServerMemberSidebar({
{users.length}
</span>
}>
{users.length === 0 && <img src={placeholderSVG} />}
{users.length === 0 && (
<img src={placeholderSVG} loading="eager" />
)}
{users.map(
(user) =>
user && (