From f72bab2143b0b723ec855533ff940bc13548737a Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sat, 21 Sep 2019 10:51:18 +0200
Subject: [PATCH] Only use placeholder if image doesn't load in 100ms

---
 src/components/Cards/CardImage.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/Cards/CardImage.vue b/src/components/Cards/CardImage.vue
index 809aa8b..277fa91 100644
--- a/src/components/Cards/CardImage.vue
+++ b/src/components/Cards/CardImage.vue
@@ -17,16 +17,23 @@ export default class CardImage extends Vue {
 
   private loaded!: boolean;
   private loadedURL!: string;
+  private loadedTimeout!: boolean;
 
   private data() {
     return {
       loaded: false,
-      loadedURL: ""
+      loadedURL: "",
+      loadedTimeout: false
     };
   }
 
   private mounted() {
     this.fetchImage();
+    setTimeout(() => {
+      if (!this.loaded) {
+        this.loadedTimeout = true;
+      }
+    }, 100);
     this.$watch("id", () => {
       this.loaded = false;
       this.fetchImage();
@@ -43,7 +50,10 @@ export default class CardImage extends Vue {
     if (this.loaded) {
       return this.loadedURL;
     }
-    return require("@/assets/images/cardback.webp");
+    if (this.loadedTimeout) {
+      return require("@/assets/images/cardback.webp");
+    }
+    return "";
   }
 }
 </script>