Replaced error box art with new one + lazyload

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);
       }
-      host.getBoxArt(app.id).then(function(resolvedPromise) {
-        // put the box art into the image holder
       var img = new Image();
+      host.getBoxArt(app.id).then(function(resolvedPromise) {
         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();

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>