avatar should not have gray background (#237)

fixes #233

routes/_components/Avatar.html

@@ -1,17 +1,24 @@
 {{#if error}}
-<svg class="{{className || ''}} avatar size-{{size}}" aria-hidden="true">
+<svg class="{{computedClass}}" aria-hidden="true">
   <use xlink:href="#fa-user" />
 </svg>
 {{elseif $autoplayGifs}}
-  <img class="{{className || ''}} avatar size-{{size}}" aria-hidden="true" alt=""
-     src="{{account.avatar}}" on:imgLoadError="set({error: true})" />
+  <img
+    class="{{computedClass}}"
+    aria-hidden="true"
+    alt=""
+    src="{{account.avatar}}"
+    on:imgLoad="set({loaded: true})"
+    on:imgLoadError="set({error: true})" />
 {{else}}
-  <NonAutoplayImg className="{{className || ''}} avatar size-{{size}}"
+  <NonAutoplayImg
+    className="{{computedClass}}"
     ariaHidden="true"
     alt=""
     src="{{account.avatar}}"
     staticSrc="{{account.avatar_static}}"
     :isLink
+    on:imgLoad="set({loaded: true})"
     on:imgLoadError="set({error: true})"
   />
 {{/if}}
@@ -21,6 +28,10 @@
     background: var(--loading-bg);
   }
 
+  :global(.avatar.loaded) {
+    background: none;
+  }
+
   :global(.avatar.size-extra-small) {
     width: 24px;
     height: 24px;
@@ -53,15 +64,25 @@
   }
 </style>
 <script>
-  import { imgLoadError } from '../_utils/events'
+  import { imgLoad, imgLoadError } from '../_utils/events'
   import { store } from '../_store/store'
   import NonAutoplayImg from './NonAutoplayImg.html'
+  import { classname } from '../_utils/classname'
 
   export default {
     events: {
+      imgLoad,
       imgLoadError
     },
     store: () => store,
+    computed: {
+      computedClass: (className, loaded, size) => (classname(
+        'avatar',
+        className,
+        loaded && 'loaded',
+        `size-${size}`
+      ))
+    },
     components: {
       NonAutoplayImg
     }

routes/_components/NonAutoplayImg.html

@@ -4,6 +4,7 @@
        alt="{{alt || ''}}"
        title="{{alt || ''}}"
        src="{{src}}"
+       on:imgLoad
        on:imgLoadError />
 {{else}}
   <img class="{{className || ''}} non-autoplay-zoom-in {{isLink ? 'is-link' : ''}}"
@@ -11,6 +12,7 @@
        alt="{{alt || ''}}"
        title="{{alt || ''}}"
        src="{{staticSrc}}"
+       on:imgLoad
        on:imgLoadError
        on:mouseover="onMouseOver(event)"
        ref:node />
@@ -24,7 +26,7 @@
   }
 </style>
 <script>
-  import { imgLoadError, mouseover } from '../_utils/events'
+  import { imgLoad, imgLoadError, mouseover } from '../_utils/events'
   export default {
     methods: {
       onMouseOver (mouseOver) {
@@ -33,6 +35,7 @@
       }
     },
     events: {
+      imgLoad,
       imgLoadError,
       mouseover
     }