From 0837765bca0c4a7200dda20a9c0842358d89613b Mon Sep 17 00:00:00 2001
From: "L. E. Segovia" <13498015+amyspark@users.noreply.github.com>
Date: Thu, 22 Nov 2018 15:09:03 +0000
Subject: [PATCH] Remove spinner after image has been loaded

This fixes transparent images that still show the spinner beneath them
after they've been loaded successfully.
---
 src/renderer/components/atoms/FailoverImg.vue | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/atoms/FailoverImg.vue b/src/renderer/components/atoms/FailoverImg.vue
index 81002d4e..7e43b7f1 100644
--- a/src/renderer/components/atoms/FailoverImg.vue
+++ b/src/renderer/components/atoms/FailoverImg.vue
@@ -4,6 +4,8 @@
   :title="title"
   :alt="alt"
   v-on:error="failover"
+  v-on:load="loading = false"
+  :class="loading ? 'loading' : ''"
   @click="$emit('click')" />
 </template>
 
@@ -46,11 +48,14 @@ export default {
 
 <style lang="scss" scoped>
 img {
-  min-width: 20px;
-  min-height: 20px;
-  background-image: url("../../assets/images/loading-spinner.svg");
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: contain;
+  min-width: 1em;
+  min-height: 1em;
+
+  &.loading {
+    background-image: url("../../images/loading-spinner.svg");
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
 }
 </style>