Don't render preview until image is loaded

client/components/LinkPreview.vue

@@ -1,6 +1,7 @@
 <template>
 	<div
-		v-if="link.shown && link.canDisplay"
+		v-if="link.shown"
+		v-show="link.canDisplay"
 		ref="container"
 		class="preview">
 		<div
@@ -18,6 +19,8 @@
 						decoding="async"
 						alt=""
 						class="thumb"
+						@error="onThumbnailError"
+						@abort="onThumbnailError"
 						@load="onPreviewReady">
 				</a>
 				<div class="toggle-text">
@@ -135,6 +138,23 @@ export default {
 		},
 	},
 	mounted() {
+		// Don't display previews while they are loading on the server
+		if (this.link.type === "loading") {
+			return;
+		}
+
+		// Error don't have any media to render
+		if (this.link.type === "error") {
+			this.onPreviewReady();
+		}
+
+		// If link doesn't have a thumbnail, render it
+		if (this.link.type === "link" && !this.link.thumb) {
+			this.onPreviewReady();
+		}
+	},
+	methods: {
+		onPreviewReady() {
 			const options = require("../js/options");
 			this.$set(this.link, "canDisplay", this.link.type !== "loading" && options.shouldOpenMessagePreview(this.link.type));
 
@@ -153,10 +173,10 @@ export default {
 				this.showMoreButton = this.$refs.content.offsetWidth >= this.$refs.container.offsetWidth;
 			});
 		},
-	methods: {
+		onThumbnailError() {
-		onPreviewReady() {
+			// If thumbnail fails to load, hide it and show the preview without it
-			// TODO: Instead of forcing scroll position, wait for image to load before showing it
+			this.link.thumb = "";
-			this.$parent.$parent.$emit("keepScrollPosition");
+			this.onPreviewReady();
 		},
 		onMoreClick() {
 			this.isContentShown = !this.isContentShown;