From bc001650944ae963b12b5b2538a68de7cd0d8f82 Mon Sep 17 00:00:00 2001
From: Oleg Lobanov <oleg@lobanov.me>
Date: Thu, 23 Jul 2020 12:01:18 +0200
Subject: [PATCH] feat: add lazy load of image thumbnails

---
 frontend/package-lock.json                    | 5 +++++
 frontend/package.json                         | 1 +
 frontend/src/components/files/ListingItem.vue | 4 ++--
 frontend/src/utils/vue.js                     | 3 +++
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index eb5f4b61..1c67b00b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13030,6 +13030,11 @@
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.15.3.tgz",
       "integrity": "sha512-PVNgo6yhOmacZVFjSapZ314oewwLyXHjJwAqjnaPN1GJAJd/dvsrShGzSiJuCX4Hc36G4epJvNXUwO8y7wEKew=="
     },
+    "vue-lazyload": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.3.3.tgz",
+      "integrity": "sha512-uHnq0FTEeNmqnbBC2aRKlmtd9LofMZ6Q3mWvgfLa+i9vhxU8fDK+nGs9c1iVT85axSua/AUnMttIq3xPaU9G3A=="
+    },
     "vue-loader": {
       "version": "15.8.3",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.8.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e99c0643..0aea1e0d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
     "qrcode.vue": "^1.7.0",
     "vue": "^2.6.10",
     "vue-i18n": "^8.15.3",
+    "vue-lazyload": "^1.3.3",
     "vue-router": "^3.1.3",
     "vuex": "^3.1.2",
     "vuex-router-sync": "^5.0.0"
diff --git a/frontend/src/components/files/ListingItem.vue b/frontend/src/components/files/ListingItem.vue
index 9b0c5c6c..3103a94a 100644
--- a/frontend/src/components/files/ListingItem.vue
+++ b/frontend/src/components/files/ListingItem.vue
@@ -13,7 +13,7 @@
   :aria-label="name"
   :aria-selected="isSelected">
     <div>
-      <img v-if="type==='image'" :src="thumbnailUrl">
+      <img v-if="type==='image'" v-lazy="thumbnailUrl">
       <i v-else class="material-icons">{{ icon }}</i>
     </div>
 
@@ -213,4 +213,4 @@ export default {
     }
   }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/frontend/src/utils/vue.js b/frontend/src/utils/vue.js
index b96d5816..6cfe52b9 100644
--- a/frontend/src/utils/vue.js
+++ b/frontend/src/utils/vue.js
@@ -1,8 +1,11 @@
 import Vue from 'vue'
 import Noty from 'noty'
+import VueLazyload from 'vue-lazyload'
 import i18n from '@/i18n'
 import { disableExternal } from '@/utils/constants'
 
+Vue.use(VueLazyload)
+
 Vue.config.productionTip = true
 
 const notyDefault = {