Various bugfixes (#40)

- Fix download state not being synced correctly
- Fix double-flicker by only loading the placeholder if needed
- Fix fractional part of download numbers so they flicker less

Closes #38

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;
     }
+    if (this.loadedTimeout) {
       return require("@/assets/images/cardback.webp");
     }
+    return "";
+  }
 }
 </script>

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();
     });
   }
 
@@ -175,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) /
+      const currentNum =
-        100}`;
+        Math.round(this.downloadProgress.progress / 10485.76) / 100;
-      total = `${Math.round(this.downloadProgress.total / 10485.76) / 100} MB`;
+      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