Fix gallery view and lazy load thumbnails

src/components/messages/composition/MessageIncomingThread.vue

@@ -3,6 +3,7 @@
     ref="root"
     v-bind="{ ...$props, ...$attrs }"
     v-if="showMultiview"
+    v-intersect="onIntersect"
   >
     <div class="bubble">
       <div class="original-message" v-if="inReplyToText">
@@ -74,6 +75,7 @@ const emits = defineEmits<MessageEmits & {(event: "layout-change", value: {eleme
 
 const items: Ref<EventAttachment[]> = ref([]);
 const showItem: Ref<EventAttachment | undefined> = ref(undefined);
+const isVisible: Ref<boolean> = ref(false);
 
 const props = defineProps<MessageProps>();
 
@@ -96,6 +98,17 @@ const {
   linkify,
 } = useMessage($matrix, t, props, emits, processThread);
 
+const onRelationsCreated = () => {
+  if (event.value) {
+    thread.value = props.timelineSet.relations.getChildEventsForEvent(
+      event.value.getId() ?? "",
+      util.threadMessageType(),
+      "m.room.message"
+    );
+    event.value.off(MatrixEventEvent.RelationsCreated, onRelationsCreated);
+  }
+};
+
 watch(event, () => {
   if (event.value) {
     if (thread.value === undefined) {
@@ -123,17 +136,6 @@ const showMultiview = computed((): boolean => {
     messageText.value?.length > 0
 });
 
-const onRelationsCreated = () => {
-  if (event.value) {
-    thread.value = props.timelineSet.relations.getChildEventsForEvent(
-      event.value.getId() ?? "",
-      util.threadMessageType(),
-      "m.room.message"
-    );
-    event.value.off(MatrixEventEvent.RelationsCreated, onRelationsCreated);
-  }
-};
-
 const onItemClick = (event: any) => {
   showItem.value = event.item;
 };
@@ -145,7 +147,7 @@ const _processThread = () => {
 
   items.value = eventItems.map((e: MatrixEvent) => {
     let ea = $matrix.attachmentManager.getEventAttachment(e);
-    if (showMultiview.value) {
+    if (showMultiview.value && isVisible.value) {
       ea.loadThumbnail();
     }
     return ea;
@@ -184,6 +186,14 @@ const layoutedItems = computed(() => {
   }
   return rows;
 });
+
+const onIntersect = (isIntersecting: boolean, entries: any, observer: any) => {
+  isVisible.value = isIntersecting;
+  if (showMultiview.value && isIntersecting) {
+    items.value.forEach((a) => a.loadThumbnail());
+  }
+};
+
 </script>
 <style lang="scss">
 @use "@/assets/css/chat.scss" as *;