From 78c32035f804c68687e697103d8c59e28365f52f Mon Sep 17 00:00:00 2001
From: Jorys_Paulin <paulinjorys5@gmail.com>
Date: Thu, 26 Apr 2018 13:50:30 +0200
Subject: [PATCH] Added fade-in for images

---
 static/css/style.css | 6 ++++++
 static/js/index.js   | 9 ++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index da19daa..fa9685c 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -205,6 +205,12 @@ main {
 #game-grid .mdl-card img {
     height: 100%;
     width: 100%;
+    opacity: 0;
+    transition: opacity .3s;
+    z-index: -1;
+}
+#game-grid .mdl-card img.fade-in {
+    opacity: 1;
 }
 #game-grid .game-title {
     position: absolute;
diff --git a/static/js/index.js b/static/js/index.js
index 2f80823..338bcc8 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -537,11 +537,10 @@ function showApps(host) {
       }
       host.getBoxArt(app.id).then(function(resolvedPromise) {
         // put the box art into the image holder
-        $(outerDiv).append($("<img \>", {
-          src: resolvedPromise,
-          name: app.title
-        }));
-
+        var img = new Image();
+        img.src = resolvedPromise;
+        img.onload = e => img.classList.add('fade-in');
+        $(outerDiv).append(img);
       }, function(failedPromise) {
         console.log('%c[index.js, showApps]', 'color: green;', 'Error! Failed to retrieve box art for app ID: ' + app.id + '. Returned value was: ' + failedPromise, '\n Host object:', host, host.toString());
         $(outerDiv).append($("<img \>", {