From 29a105d0168c8f76f29af0688cde90a78beef709 Mon Sep 17 00:00:00 2001
From: Jorys_Paulin <paulinjorys5@gmail.com>
Date: Thu, 3 May 2018 13:28:31 +0200
Subject: [PATCH] Replaced error box art with new one + lazyload

---
 static/js/index.js               |  12 ++++--------
 static/res/no_app_image.png      | Bin 1622 -> 0 bytes
 static/res/placeholder_error.svg |   1 +
 3 files changed, 5 insertions(+), 8 deletions(-)
 delete mode 100644 static/res/no_app_image.png
 create mode 100644 static/res/placeholder_error.svg

diff --git a/static/js/index.js b/static/js/index.js
index 486d236..9e92e70 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -532,19 +532,15 @@ function showApps(host) {
         // apply CSS stylization to indicate whether the app is active
         stylizeBoxArt(host, app.id);
       }
+      var img = new Image();
       host.getBoxArt(app.id).then(function(resolvedPromise) {
-        // put the box art into the image holder
-        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 \>", {
-          src: "static/res/no_app_image.png",
-          name: app.title
-        }));
+        img.src = 'static/res/placeholder_error.svg'
       });
+      img.onload = e => img.classList.add('fade-in');
+      $(outerDiv).append(img);
     });
   }, function(failedAppList) {
     $('#naclSpinner').hide();
diff --git a/static/res/no_app_image.png b/static/res/no_app_image.png
deleted file mode 100644
index 4cbad3e0439718265ea3c96656475d0c83fd4a49..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1622
zcma)7eKb^Q93Iz=>-!ePwxb<vCp4TXpS5#zH^wwHg!NUCnzhzqmaM4F<Z3d?M;~j;
zcST|er?JK~L})XM!jWbpG!3eqohU>;nth!;%kJrq-E+@--+Q0)d!FC>d*9!E?&&=q
zbREt0ngjwthq24W8_Z$?K}8c$15f^X>wg53+97wk3qiSbUAbNQ13)yQcLl~02wM6}
zLxqr=Zv;T~?-)#)`mlyEOwx$R9IPP_R>>GHpMR0iuNYKZ$lYa>)FXK~q>LMR;7UVt
zJ!vr~BAL(lj&^y~UeEKJ7++~W^kEL@+-T%19@7ZvG2{_o2vWh5FpNY(Q3QcuXleWx
z^jGA+qL!gM#(OLMwq&vvM)%y=VSUMcD)E!Jpf<<Mm|OedWOGqfTH`p&C`Gv6S~(Ys
zPgoR}$+rVAhB&-X4@rHpufN=9P}=))Q0YOUE{^uf^PkZXZmEs7vn^9UaacLkwFdE&
z9(SVq`u5Bu?(UuH;8bA=FWk$nhZlwCD($LK#IsT^`g*`V<>0KM$(=;y#t_X)3;;E(
zawqAyTdyt6&7xnhSTd=JPjsgoOwIBp>hkoIWJt=smIX8%FL%XH=D;mMomQf%`i`zm
zsFRB%?!5P$bS)d7$ZF>=bTjHOVMj-q#P=254CSQlxY=%nZg^nJyg59soJ}sogb}5^
z7H5itX|-B-w1Y0sIV<#|HrZ<n<q1g2qqa+ahNNe|8L%%e7gh8D&8vPDzSpu$OQtAt
zLr7Xzzu$WJEj>{{fm@hhwV+Ue!soc}W|Z?d^|fg2NDa>feZTe|r|GO9%2*qZj%pgF
z_uA@mv232y+l|y|UE=NLC8-7UTCgeQ<(~6#l~};TxS*`icj11Gt6J){ThaN&_gBY%
zL6N2>uM^UX%nLdCSFzaxh0`2ue8MMq{As<UZ4BY+fkOidW%B-J6p{1`GWg`g(9P)B
zWcnaG46;VY-cTL7P$V`k2%Lu?1>r`>9PhE~YPvU}Rm@%kniqA1wS85~x6^YW@FgEe
z+AfVwrFKP`8z7Pg&tpf9vcFHovMb6hz1_g_h4z`OKlo%1>r%KSzM{|aOwmLVj8o#N
z8(4J%Ib1DnM4`h*bjZk#Pp*;qkvi!aMdp!Y10=SU;!^nBRR^bpeI~*Jx@QuBurdqF
z?y`GBt&@YuxFAECmysQu?Bz^qXm!jyADYt_jZ^$3aao}+F@*bWqwmGgR}xSNuhoQ4
zwpne6#10Mcuywn84f5{aD?WmX^J{hB!z@$wj1?3Z?R1${KPbAklN9^N9u;S}mk+WH
zTPcq7$Vjfj6d6eoL=~HBh7s}3z*%RK!`R0I3j55qVw()Cs=%Z4w@CX9SCX(X(Dc-<
zf*|-%BaRJ)1HE`vyc2Aie7b*54a$+vI~}PnusMy5we!<ORRuKo@O_RYeE6i*?;t}A
zkyZ0pDAxli7C;KnxaF2%T6pKtaWyC~WRo>?)GTxQm?F;--Wry-9lF&l5dzjhBh!wp
zVK5-cFp@*S(oHz8hd&8XL2>fLUK{w0E77lQwK&7kK989$dr>w?X<Yc}z^A(DB&~)S
zJ-ne=mVk<rC*KkC?z<ARPd*XdSflQG?v!J2aB!r58^SkeJ9c}Wx+@wB7~@kS#9SBV
zKOG&V5rud6uHSYS6q<c5P4!ZMR_8WKa>Evrx;jlWakAn_gugWucp)?=uK*QapmyEv
z(ZI<TXIfO(fmc4cIBFkV6YsQR%B=Xvm%mc9!FOhC0&jK5ELLZ<dXuUL9^t33hRdpr
z^MbyS>DsWj{>?22e~_)HPA<Vf51fK8LJW(*jl6w$LcM+iOZP*QTehziEBpZZ+adqq
rd;bSovDRhc2hd8^W%FHuUOgK2Ly77;#O-F_4?tkhJY1@Fh9v(9w#%V^

diff --git a/static/res/placeholder_error.svg b/static/res/placeholder_error.svg
new file mode 100644
index 0000000..c3332b6
--- /dev/null
+++ b/static/res/placeholder_error.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 300 400" width="300" height="400"><defs><clipPath id="_clipPath_7VrBmLEdSmb7vTXt6k0koa8xYu1zCaFz"><rect width="300" height="400"/></clipPath></defs><g clip-path="url(#_clipPath_7VrBmLEdSmb7vTXt6k0koa8xYu1zCaFz)"><rect width="300" height="400" style="fill:rgb(29,29,29)"/><g id="ic_warning_black_48px"><path d=" M 102 152 L 198 152 L 198 248 L 102 248 L 102 152 Z " fill="none"/><path d=" M 106 236 L 194 236 L 150 160 L 106 236 Z  M 154 224 L 146 224 L 146 216 L 154 216 L 154 224 Z  M 154 208 L 146 208 L 146 192 L 154 192 L 154 208 Z " fill="rgb(39,39,39)"/></g></g></svg>
\ No newline at end of file