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 ""; } } diff --git a/src/views/Settings.vue b/src/views/Settings.vue index 04a9181..828c764 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(); }); } @@ -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) / - 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