improve perf of loading avatars

routes/_components/Avatar.html

@@ -1,15 +1,11 @@
-{{#await imagePromise}}
+{{#if error}}
-<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}}
 <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: {
+    events: {
-      imageSrc: (account) => account.avatar,
+      loadError (node, callback) {
-      imagePromise: (imageSrc) => new Promise((resolve, reject) => {
+        node.addEventListener('error', callback)
-        let img = new Image()
+
-        img.onload = resolve
+        return {
-        img.onerror = reject
+          teardown () {
-        img.src = imageSrc
+            node.removeEventListener('error', callback)
-      })
+          }
+        }
+      },
     }
   }
 </script>

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 = (() => {