From 5e2ecd72a11d39af19c2120abb53c59ba2f7cfbf Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sat, 21 Sep 2019 10:44:35 +0200
Subject: [PATCH 1/3] Fix #38

---
 src/views/Settings.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 04a9181..e5800cb 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -126,6 +126,7 @@ export default class SettingsView extends Vue {
     worker.on("finish", async _ => {
       this.downloadState = null;
       await refreshCardSource();
+      this.cardImageSource = cardImageSource();
     });
   }
 
-- 
2.40.1


From f13f11d255913632df6d7b488afac8117d069ee1 Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sat, 21 Sep 2019 10:45:22 +0200
Subject: [PATCH 2/3] Fix jittering during download by padding the numbers

---
 src/views/Settings.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index e5800cb..828c764 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -176,9 +176,11 @@ export default class SettingsView extends Vue {
       current = `${(this.downloadProgress.progress / 2) | 0}`;
       total = `${(this.downloadProgress.total / 2) | 0}`;
     } else {
-      current = `${Math.round(this.downloadProgress.progress / 10485.76) /
-        100}`;
-      total = `${Math.round(this.downloadProgress.total / 10485.76) / 100} MB`;
+      const currentNum =
+        Math.round(this.downloadProgress.progress / 10485.76) / 100;
+      current = currentNum.toString().padEnd(currentNum < 10 ? 4 : 5, "0");
+      const totalNum = Math.round(this.downloadProgress.total / 10485.76) / 100;
+      total = totalNum.toString().padEnd(totalNum < 10 ? 4 : 5, "0") + " MB";
     }
     const percent = Math.round(
       (this.downloadProgress.progress / this.downloadProgress.total) * 100
-- 
2.40.1


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 3/3] 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>
-- 
2.40.1