From 8d543ab94d3678728466d3627e0d419ec00f3010 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Wed, 29 Jan 2020 04:53:35 +0100
Subject: viewer: finalized the thumbnails view layouts. implemented thumbnails
 lazy-loading

---
 viewer/src/views/GalleryThumbnail.vue | 34 ++++++++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

(limited to 'viewer/src/views/GalleryThumbnail.vue')

diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
index 4d8f604..7ceea4f 100644
--- a/viewer/src/views/GalleryThumbnail.vue
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -18,8 +18,15 @@
 -->
 
 <template>
-  <div>
-    <img v-if="item.thumbnail" class="thumbnail" :src="pictureSrc" :title="item.path" />
+  <div class="forcedsize" :class="{preload: loading}">
+    <v-lazy-image
+      v-if="item.thumbnail"
+      class="thumbnail"
+      :src="pictureSrc"
+      :title="item.path"
+      @intersect="loading=true"
+      @load="loading=false"
+    />
     <div v-else class="flex-column flex-center">
       <fa-icon icon="folder" class="fa-4x" />
       {{item.path}}
@@ -34,6 +41,8 @@ import { Component, Vue, Prop } from "vue-property-decorator";
 export default class GalleryThumbnail extends Vue {
   @Prop({ required: true }) readonly item!: Gallery.Item;
 
+  loading: boolean = false;
+
   get pictureSrc() {
     return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
   }
@@ -41,8 +50,29 @@ export default class GalleryThumbnail extends Vue {
 </script>
 
 <style lang="scss">
+@import "@/assets/scss/theme.scss";
+
 .thumbnail {
   max-width: 250px;
   max-height: 250px;
 }
+.preload {
+  background: linear-gradient(to right, rgba(0, 0, 0, 0) 8%, $loader-color 18%, rgba(0, 0, 0, 0) 33%);
+  background-size: 200% 50px;
+  animation: preloadAnimation 2s infinite linear;
+}
+@keyframes preloadAnimation {
+  from {
+    background-position: -200px 0;
+  }
+  to {
+    background-position: 200px 0;
+  }
+}
+// Temporary size until we get the true thumbnail size
+.forcedsize {
+  width: 250px;
+  height: 250px;
+  text-align: center;
+}
 </style>
-- 
cgit v1.2.3