From 1b674f13fb3b49104f3bbe03de3836268b7331cc Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Mon, 19 Aug 2019 14:49:20 +0200
Subject: [PATCH] Async background load on homepage

---
 client/package-lock.json                      | 51 ++++----------
 client/src/assets/css/base.css                | 10 ++-
 client/src/components/LazyBackgroundImage.vue | 68 +++++++++++++++++++
 client/src/views/Home.vue                     | 54 ++++++++-------
 server/package-lock.json                      |  4 +-
 5 files changed, 120 insertions(+), 67 deletions(-)
 create mode 100644 client/src/components/LazyBackgroundImage.vue

diff --git a/client/package-lock.json b/client/package-lock.json
index c92210b..f50f3e1 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2889,8 +2889,7 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "coa": {
       "version": "2.0.2",
@@ -5207,8 +5206,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5229,14 +5227,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5251,20 +5247,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5381,8 +5374,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5394,7 +5386,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5409,7 +5400,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5417,14 +5407,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5443,7 +5431,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5524,8 +5511,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5537,7 +5523,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5623,8 +5608,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5660,7 +5644,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5680,7 +5663,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5724,14 +5706,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -6400,8 +6380,7 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
           "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "string-width": {
           "version": "2.1.1",
@@ -6419,7 +6398,6 @@
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
           "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -9548,8 +9526,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
       "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "rx-lite-aggregates": {
       "version": "4.0.8",
diff --git a/client/src/assets/css/base.css b/client/src/assets/css/base.css
index 770568a..b9f5428 100644
--- a/client/src/assets/css/base.css
+++ b/client/src/assets/css/base.css
@@ -34,4 +34,12 @@
 
 .scale-100 {
   transform: scale(1);
-}
\ No newline at end of file
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 2s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
diff --git a/client/src/components/LazyBackgroundImage.vue b/client/src/components/LazyBackgroundImage.vue
new file mode 100644
index 0000000..78b9ae0
--- /dev/null
+++ b/client/src/components/LazyBackgroundImage.vue
@@ -0,0 +1,68 @@
+<template>
+  <transition :name="transitionName">
+    <div
+      v-show="imageState === 'loaded'"
+      :class="[imageClass, imageState]"
+      :style="computedStyle"
+      :data-state="imageState"
+    ></div>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    imageSource: {
+      type: String,
+      required: true
+    },
+    imageClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    backgroundSize: {
+      type: String,
+      required: false,
+      default: 'cover'
+    },
+    transitionName: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      imageState: 'loading',
+      asyncImage: new Image()
+    }
+  },
+
+  computed: {
+    computedStyle () {
+      if (this.imageState === 'loaded') {
+        return 'background-image: url(' + this.asyncImage.src + '); background-size: ' + this.backgroundSize
+      }
+      return '';
+    }
+  },
+
+  methods: {
+    fetchImage () {
+      this.asyncImage.onload = this.imageOnLoad
+      this.imageState = 'loading'
+      this.asyncImage.src = this.imageSource
+    },
+    imageOnLoad () {
+      this.imageState = 'loaded'
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.fetchImage()
+    })
+  }
+}
+</script>
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 427af70..62183c2 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,31 +1,40 @@
 <template>
-  <div class="homepage h-screen flex flex-col items-center justify-center">
+  <div class="bg-blue-900">
+    <LazyBackground
+      :image-source="require('@/assets/bg-homepage-1.jpg')"
+      image-class="absolute inset-0"
+      transition-name="fade"
+    ></LazyBackground>
 
-    <div class="absolute top-0 right-0">
-      <div class="line line-top relative mr-4 mt-4 w-20 h-2"></div>
+    <div class="h-screen flex flex-col items-center justify-center">
+      <div class="absolute top-0 right-0">
+        <div class="line line-top relative mr-4 mt-4 w-20 h-2"></div>
+      </div>
+
+      <div class="absolute bottom-0 left-0">
+        <div class="line line-bottom relative ml-4 mb-4 w-20 h-2"></div>
+      </div>
+
+      <div class="relative flex flex-col items-center w-full max-w-lg">
+        <img class="absolute logo" src="@/assets/Logo.svg" alt="logo" />
+        <SearchForm @formSubmit="redirect" />
+      </div>
     </div>
-
-    <div class="absolute bottom-0 left-0">
-      <div class="line line-bottom relative ml-4 mb-4 w-20 h-2"></div>
-    </div>
-
-    <div class="relative flex flex-col items-center w-full max-w-lg">
-      <img class="absolute logo" src="@/assets/Logo.svg" alt="logo">
-      <SearchForm @formSubmit="redirect"/>
-    </div>
-
   </div>
 </template>
 
 <script>
+import LazyBackground from '@/components/LazyBackgroundImage.vue'
 import SearchForm from '@/components/SearchForm.vue';
 
 export default {
   components: {
+    LazyBackground,
     SearchForm
   },
+
   methods: {
-    redirect(summoner, region) {
+    redirect (summoner, region) {
       this.$router.push(`/summoner/${region}/${summoner}`)
     },
   }
@@ -33,23 +42,16 @@ export default {
 </script>
 
 <style scoped>
-.homepage {
-  background-image: url("../assets/bg-homepage-1.jpg");
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-
 .line {
-  background: rgba(178, 245, 234, .55);
+  background: rgba(178, 245, 234, 0.55);
 }
 
 .line::after {
-  content: '';
+  content: "";
   position: absolute;
   width: 4.5rem;
-  height: .5rem;
-  background: rgba(178, 245, 234, .55);
+  height: 0.5rem;
+  background: rgba(178, 245, 234, 0.55);
 }
 
 .line-top::after {
@@ -60,7 +62,7 @@ export default {
 .line-bottom::after {
   transform-origin: top left;
   transform: rotate(90deg) translateX(-100%);
-  margin-left: .5rem;
+  margin-left: 0.5rem;
 }
 
 .logo {
diff --git a/server/package-lock.json b/server/package-lock.json
index 02e986c..9500402 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -164,7 +164,6 @@
       "version": "2.8.5",
       "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
       "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
-      "dev": true,
       "requires": {
         "object-assign": "^4",
         "vary": "^1"
@@ -538,8 +537,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "on-finished": {
       "version": "2.3.0",