From 5781599e9b357fc21cce7a6047bf9776cfa666eb Mon Sep 17 00:00:00 2001
From: anewuser <anewuser@users.noreply.github.com>
Date: Mon, 18 Dec 2023 13:20:23 -0300
Subject: [PATCH] Fix image lazy loading for Firefox (#3264)

---
 src/components/ChannelItem.vue  | 2 +-
 src/components/ChannelPage.vue  | 2 +-
 src/components/CommentItem.vue  | 2 +-
 src/components/PlaylistItem.vue | 2 +-
 src/components/PlaylistPage.vue | 2 +-
 src/components/VideoItem.vue    | 4 ++--
 src/components/WatchVideo.vue   | 2 +-
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/ChannelItem.vue b/src/components/ChannelItem.vue
index 3b2f81ef..8b7f708e 100644
--- a/src/components/ChannelItem.vue
+++ b/src/components/ChannelItem.vue
@@ -2,7 +2,7 @@
     <div class="flex flex-col flex-justify-between">
         <router-link :to="props.item.url">
             <div class="my-4 flex justify-center">
-                <img class="aspect-square w-[50%] rounded-full" :src="props.item.thumbnail" loading="lazy" />
+                <img loading="lazy" class="aspect-square w-[50%] rounded-full" :src="props.item.thumbnail" />
             </div>
             <p>
                 <span v-text="props.item.name" />
diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index c04046fc..e01e4c1b 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -3,10 +3,10 @@
 
     <LoadingIndicatorPage :show-content="channel != null && !channel.error">
         <img
+            loading="lazy"
             v-if="channel.bannerUrl"
             :src="channel.bannerUrl"
             class="h-30 w-full object-cover py-1.5 md:h-50"
-            loading="lazy"
         />
         <div class="flex flex-col items-center justify-between md:flex-row">
             <div class="flex place-items-center">
diff --git a/src/components/CommentItem.vue b/src/components/CommentItem.vue
index 56519794..9a03d69b 100644
--- a/src/components/CommentItem.vue
+++ b/src/components/CommentItem.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="comment mt-1.5 flex">
         <img
+            loading="lazy"
             :src="comment.thumbnail"
             class="comment-avatar h-12 w-12 rounded-full"
             height="48"
             width="48"
-            loading="lazy"
             alt="Avatar"
         />
 
diff --git a/src/components/PlaylistItem.vue b/src/components/PlaylistItem.vue
index 5ee3583e..596b61d2 100644
--- a/src/components/PlaylistItem.vue
+++ b/src/components/PlaylistItem.vue
@@ -2,7 +2,7 @@
     <div class="flex flex-col flex-justify-between">
         <router-link :to="props.item.url">
             <div class="relative">
-                <img class="w-full" :src="props.item.thumbnail" loading="lazy" />
+                <img loading="lazy" class="w-full" :src="props.item.thumbnail" />
             </div>
             <p>
                 <span v-text="props.item.name" />
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index 1ca66bf1..d6923d5b 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -9,7 +9,7 @@
         <div class="mt-1 flex items-center justify-between">
             <div>
                 <router-link class="link flex items-center gap-3" :to="playlist.uploaderUrl || '/'">
-                    <img :src="playlist.uploaderAvatar" loading="lazy" class="rounded-full" />
+                    <img loading="lazy" :src="playlist.uploaderAvatar" class="rounded-full" />
                     <strong v-text="playlist.uploader" />
                 </router-link>
             </div>
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 0b05f35a..d7e657a3 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -13,11 +13,11 @@
         >
             <div class="w-full">
                 <img
+                    loading="lazy"
                     class="aspect-video w-full object-contain"
                     :src="thumbnail"
                     :alt="title"
                     :class="{ 'shorts-img': item.isShort, 'opacity-75': item.watched }"
-                    loading="lazy"
                 />
                 <!-- progress bar -->
                 <div class="relative h-1 w-full">
@@ -61,9 +61,9 @@
         <div class="flex">
             <router-link :to="item.uploaderUrl">
                 <img
+                    loading="lazy"
                     v-if="item.uploaderAvatar"
                     :src="item.uploaderAvatar"
-                    loading="lazy"
                     class="mr-0.5 mt-0.5 h-32px w-32px rounded-full"
                     width="68"
                     height="68"
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index eb9fd7a9..29c27f88 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -73,11 +73,11 @@
                 <!-- Channel Image & Info -->
                 <div class="flex items-center">
                     <img
+                        loading="lazy"
                         height="48"
                         width="48"
                         :src="video.uploaderAvatar"
                         alt=""
-                        loading="lazy"
                         class="rounded-full"
                     />
                     <router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">{{