feat: add lazy load of image thumbnails

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",

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"

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>

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 = {