From 4f44a5ab442dfcf55460ac4026bd90546611c5a4 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 20 Dec 2018 12:37:51 +0100
Subject: [PATCH] Lazy load more images

---
 front/src/components/Sidebar.vue            |  2 +-
 front/src/components/audio/album/Widget.vue | 14 ++++++--------
 front/src/components/audio/artist/Card.vue  |  3 +--
 front/src/components/auth/Profile.vue       |  2 +-
 front/src/components/auth/Settings.vue      |  2 +-
 front/src/components/common/UserLink.vue    |  2 +-
 6 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 10f10f91b..f072ce808 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -39,7 +39,7 @@
               <translate :translate-params="{username: $store.state.auth.username}">
                 Logged in as %{ username }
               </translate>
-              <img class="ui right floated circular tiny avatar image" v-if="$store.state.auth.profile.avatar.square_crop" :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile.avatar.square_crop)" />
+              <img class="ui right floated circular tiny avatar image" v-if="$store.state.auth.profile.avatar.square_crop" v-lazy="$store.getters['instance/absoluteUrl']($store.state.auth.profile.avatar.square_crop)" />
             </router-link>
             <router-link class="item" v-if="$store.state.auth.authenticated" :to="{path: '/settings'}"><i class="setting icon"></i><translate>Settings</translate></router-link>
             <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'notifications'}">
diff --git a/front/src/components/audio/album/Widget.vue b/front/src/components/audio/album/Widget.vue
index 53f569c13..f7100a9b8 100644
--- a/front/src/components/audio/album/Widget.vue
+++ b/front/src/components/audio/album/Widget.vue
@@ -11,7 +11,7 @@
         <div class="ui loader"></div>
       </div>
       <div class="card" v-for="album in albums" :key="album.id">
-        <div :class="['ui', 'image', 'with-overlay', {'default-cover': !album.cover.original}]" :style="getImageStyle(album)">
+        <div :class="['ui', 'image', 'with-overlay', {'default-cover': !album.cover.original}]" v-lazy:background-image="getImageUrl(album)">
           <play-button class="play-overlay" :icon-only="true" :is-playable="album.is_playable" :button-classes="['ui', 'circular', 'large', 'orange', 'icon', 'button']" :album="album.id"></play-button>
         </div>
         <div class="content">
@@ -87,17 +87,15 @@ export default {
         this.offset = Math.max(this.offset - this.limit, 0)
       }
     },
-    getImageStyle (album) {
+    getImageUrl (album) {
       let url = '../../../assets/audio/default-cover.png'
 
       if (album.cover.original) {
         url = this.$store.getters['instance/absoluteUrl'](album.cover.medium_square_crop)
       } else {
-        return {}
-      }
-      return {
-        'background-image': `url("${url}")`
+        return null
       }
+      return url
     }
   },
   watch: {
@@ -108,10 +106,10 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-@import '../../../style/vendor/media';
+@import "../../../style/vendor/media";
 
 .default-cover {
-  background-image: url('../../../assets/audio/default-cover.png') !important;
+  background-image: url("../../../assets/audio/default-cover.png") !important;
 }
 
 .wrapper {
diff --git a/front/src/components/audio/artist/Card.vue b/front/src/components/audio/artist/Card.vue
index 5f8cfe10a..1876c42c0 100644
--- a/front/src/components/audio/artist/Card.vue
+++ b/front/src/components/audio/artist/Card.vue
@@ -11,7 +11,7 @@
             <tbody>
               <tr v-for="album in albums">
                 <td>
-                  <img class="ui mini image" v-if="album.cover.original" :src="$store.getters['instance/absoluteUrl'](album.cover.small_square_crop)">
+                  <img class="ui mini image" v-if="album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](album.cover.small_square_crop)">
                   <img class="ui mini image" v-else src="../../../assets/audio/default-cover.png">
                 </td>
                 <td colspan="4">
@@ -82,5 +82,4 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 </style>
diff --git a/front/src/components/auth/Profile.vue b/front/src/components/auth/Profile.vue
index e1bdd416c..32dae5336 100644
--- a/front/src/components/auth/Profile.vue
+++ b/front/src/components/auth/Profile.vue
@@ -7,7 +7,7 @@
       <div :class="['ui', 'head', 'vertical', 'center', 'aligned', 'stripe', 'segment']">
         <h2 class="ui center aligned icon header">
           <i v-if="!profile.avatar.square_crop" class="circular inverted user green icon"></i>
-          <img class="ui big circular image" v-else :src="$store.getters['instance/absoluteUrl'](profile.avatar.square_crop)" />
+          <img class="ui big circular image" v-else v-lazy="$store.getters['instance/absoluteUrl'](profile.avatar.square_crop)" />
           <div class="content">
             {{ profile.username }}
             <div class="sub header" v-translate="{date: signupDate}">Registered since %{ date }</div>
diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index f4e357f28..c417f9fbc 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -53,7 +53,7 @@
             </div>
             <div class="ui six wide column">
               <h3 class="ui header"><translate>Current avatar</translate></h3>
-              <img class="ui circular image" v-if="currentAvatar && currentAvatar.square_crop" :src="$store.getters['instance/absoluteUrl'](currentAvatar.medium_square_crop)" />
+              <img class="ui circular image" v-if="currentAvatar && currentAvatar.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](currentAvatar.medium_square_crop)" />
               <div class="ui hidden divider"></div>
               <button @click="removeAvatar" v-if="currentAvatar && currentAvatar.square_crop" :class="['ui', {'loading': isLoadingAvatar}, ,'yellow', 'button']">
                 <translate>Remove avatar</translate>
diff --git a/front/src/components/common/UserLink.vue b/front/src/components/common/UserLink.vue
index 0ae4d4ec8..194fdbe08 100644
--- a/front/src/components/common/UserLink.vue
+++ b/front/src/components/common/UserLink.vue
@@ -3,7 +3,7 @@
     <img
       class="ui tiny circular avatar"
       v-if="user.avatar && user.avatar.small_square_crop"
-      :src="$store.getters['instance/absoluteUrl'](user.avatar.small_square_crop)" />
+      v-lazy="$store.getters['instance/absoluteUrl'](user.avatar.small_square_crop)" />
     <span v-else :style="defaultAvatarStyle" class="ui circular label">{{ user.username[0]}}</span>
     &nbsp;@{{ user.username }}
   </span>