From dabbc39947b5cfb29f1775fd63f1b094d320234b Mon Sep 17 00:00:00 2001
From: TheDogHusky <contact@classydev.fr>
Date: Wed, 2 Oct 2024 17:51:59 +0200
Subject: [PATCH] perf: added lazy loading to images

---
 src/pages/index.vue         | 2 +-
 src/pages/random/[type].vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 3134e8d..ca89526 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -31,7 +31,7 @@ onMounted(() => {
     </div>
     <div class="d-flex align-items-center justify-content-center flex-wrap flex-column center">
       <div class="rounded p-0 border border-3 border-primary image-main-frame">
-        <img :src="imageUrl" v-if="imageUrl" alt="neko" class="object-fit-contain main-image" @error="$event.target.src='https://http.cat/404'" />
+        <img :src="imageUrl" loading="lazy" v-if="imageUrl" alt="neko" class="object-fit-contain main-image" @error="$event.target.src='https://http.cat/404'" />
       </div>
       <div class="btn-toolbar justify-content-center gap-2 mt-2" role="group">
         <button @click="fetchImage" role="button" class="btn btn-primary" :disabled="isLoading">New one!</button>
diff --git a/src/pages/random/[type].vue b/src/pages/random/[type].vue
index d02a350..e228751 100644
--- a/src/pages/random/[type].vue
+++ b/src/pages/random/[type].vue
@@ -43,7 +43,7 @@ onMounted(() => {
     </div>
     <div class="row">
       <div class="d-flex justify-content-center">
-        <img class="img-fluid mt-3 mx-auto" v-if="imageUrl" @error="$event.target.src='https://http.cat/404'" :alt="$route.params.type" :src="imageUrl">
+        <img class="img-fluid mt-3 mx-auto" loading="lazy" v-if="imageUrl" @error="$event.target.src='https://http.cat/404'" :alt="$route.params.type" :src="imageUrl">
       </div>
     </div>
   </main>