From f48aa23fcdbd06300315456729d697b69f858130 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 20 Jan 2018 21:06:30 -0800
Subject: [PATCH] improve perf of loading avatars

---
 routes/_components/Avatar.html | 32 +++++++++++++++-----------------
 routes/_components/Layout.html |  6 +++---
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/routes/_components/Avatar.html b/routes/_components/Avatar.html
index d155a55..13c4458 100644
--- a/routes/_components/Avatar.html
+++ b/routes/_components/Avatar.html
@@ -1,15 +1,11 @@
-{{#await imagePromise}}
-<img class="{{className}} avatar" aria-hidden="true" alt=""
-     src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" />
-{{then src}}
-<img class="{{className}} avatar" aria-hidden="true" alt=""
-     src="{{account.avatar}}" />
-{{catch error}}
+{{#if error}}
 <svg class="{{className}} avatar" aria-hidden="true">
   <use xlink:href="#fa-user" />
 </svg>
-{{/await}}
-
+{{else}}
+<img class="{{className}} avatar" aria-hidden="true" alt=""
+     src="{{account.avatar}}" on:loadError="set({error: true})" />
+{{/if}}
 <style>
   .avatar {
     width: 48px;
@@ -23,14 +19,16 @@
 </style>
 <script>
   export default {
-    computed: {
-      imageSrc: (account) => account.avatar,
-      imagePromise: (imageSrc) => new Promise((resolve, reject) => {
-        let img = new Image()
-        img.onload = resolve
-        img.onerror = reject
-        img.src = imageSrc
-      })
+    events: {
+      loadError (node, callback) {
+        node.addEventListener('error', callback)
+
+        return {
+          teardown () {
+            node.removeEventListener('error', callback)
+          }
+        }
+      },
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/Layout.html b/routes/_components/Layout.html
index ce524aa..59ea249 100644
--- a/routes/_components/Layout.html
+++ b/routes/_components/Layout.html
@@ -52,13 +52,13 @@
           leading: true,
           trailing: true
         })
-        node.addEventListener('scroll', onScroll);
+        node.addEventListener('scroll', onScroll)
 
         return {
           teardown() {
-            node.removeEventListener('scroll', onScroll);
+            node.removeEventListener('scroll', onScroll)
           }
-        };
+        }
       },
       fullscreen(node, callback) {
         const onFullscreen = (() => {