From 789fd97512dbc982ed9fcd14926cfd430e7e1f02 Mon Sep 17 00:00:00 2001
From: Laura Hausmann <laura@hausmann.dev>
Date: Thu, 23 Nov 2023 17:16:52 +0100
Subject: [PATCH] [client] Allow async+lazy rendering of all images in timeline
 views

---
 packages/client/src/components/MkImgWithBlurhash.vue | 1 +
 packages/client/src/components/MkMention.vue         | 2 +-
 packages/client/src/components/global/MkAvatar.vue   | 4 ++--
 packages/client/src/components/global/MkEmoji.vue    | 2 ++
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue
index 5a0cefec2..791151418 100644
--- a/packages/client/src/components/MkImgWithBlurhash.vue
+++ b/packages/client/src/components/MkImgWithBlurhash.vue
@@ -15,6 +15,7 @@
 		:class="{ cover }"
 		:style="{ 'object-fit': cover ? 'cover' : null }"
 		loading="lazy"
+		decoding="async"
 		@load="onLoad"
 	/>
 </template>
diff --git a/packages/client/src/components/MkMention.vue b/packages/client/src/components/MkMention.vue
index 59e0fb92e..dbbe9ea49 100644
--- a/packages/client/src/components/MkMention.vue
+++ b/packages/client/src/components/MkMention.vue
@@ -7,7 +7,7 @@
 		:to="url"
 		@click.stop
 	>
-		<img class="icon" :src="`/avatar/@${username}@${host}`" alt="" />
+		<img class="icon" :src="`/avatar/@${username}@${host}`" alt="" loading="lazy" decoding="async" />
 		<span class="main">
 			<span class="username">@{{ username }}</span>
 			<span
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index 8d6941670..77f545e4e 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -8,7 +8,7 @@
 		:title="acct(user)"
 		@click="onClick"
 	>
-		<img class="inner" :src="url" decoding="async" />
+		<img class="inner" :src="url" loading="lazy" decoding="async" />
 		<MkUserOnlineIndicator
 			v-if="showIndicator && user.instance == null"
 			class="indicator"
@@ -26,7 +26,7 @@
 		:target="target"
 		@click.stop
 	>
-		<img class="inner" :src="url" decoding="async" />
+		<img class="inner" :src="url" loading="lazy" decoding="async" />
 		<MkUserOnlineIndicator
 			v-if="showIndicator && user.instance == null"
 			class="indicator"
diff --git a/packages/client/src/components/global/MkEmoji.vue b/packages/client/src/components/global/MkEmoji.vue
index 247974fdd..9e46f05fd 100644
--- a/packages/client/src/components/global/MkEmoji.vue
+++ b/packages/client/src/components/global/MkEmoji.vue
@@ -7,6 +7,7 @@
 		:alt="alt"
 		:title="alt"
 		decoding="async"
+		loading="lazy"
 	/>
 	<img
 		v-else-if="char && !useOsNativeEmojis"
@@ -15,6 +16,7 @@
 		:alt="alt"
 		:title="alt"
 		decoding="async"
+		loading="lazy"
 	/>
 	<span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
 	<span v-else>{{ emoji }}</span>