From 77f3b81e210e41edd98ae3da6837c5760c85e18e Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Tue, 2 Sep 2025 10:15:13 +0200
Subject: [PATCH] Fix thumbnail loading

Issue #678
---
 src/components/messages/composition/MessageImage.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/messages/composition/MessageImage.vue b/src/components/messages/composition/MessageImage.vue
index 442793a..9c828ef 100644
--- a/src/components/messages/composition/MessageImage.vue
+++ b/src/components/messages/composition/MessageImage.vue
@@ -8,7 +8,7 @@
       <ImageWithProgress v-if="attachment"
         :aspect-ratio="16 / 9"
         ref="image"
-        :src="attachment.src ? attachment.src : attachment.thumbnail"
+        :src="imageSource"
         :cover="cover"
         :contain="contain"
         :loadingProgress="attachment.thumbnailProgress"
@@ -22,7 +22,7 @@
 
 <script setup lang="ts">
 import { singleOrDoubleTapRecognizer } from "@/plugins/touch";
-import { computed, inject, onMounted, ref, useTemplateRef, watch } from "vue";
+import { computed, inject, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
 import MessageIncoming from "./MessageIncoming.vue";
 import MessageOutgoing from "./MessageOutgoing.vue";
 import ImageWithProgress from "../../ImageWithProgress.vue";
@@ -58,13 +58,17 @@ const {
   attachment,
 } = useMessage($matrix, t, props, undefined, undefined);
 
+const imageSource: Ref<string | undefined> = ref(undefined)
+
 const rootComponent = computed(() => {
  return isIncoming.value ? MessageIncoming : MessageOutgoing;
 })
 
 watch([isVisible, attachment], ([_v, _a]: [_v: boolean, _a: EventAttachment | undefined]) => {
   if (_v && _a) {
-    _a.loadThumbnail();
+    _a.loadThumbnail().then(() => {
+      imageSource.value = attachment.value?.src ? attachment.value.src : attachment.value?.thumbnail;
+    })
   }
 });