From 1f9be978b72cc149f2548b5c5ffd8eb72fed7f90 Mon Sep 17 00:00:00 2001
From: Bruno Windels <bruno@windels.cloud>
Date: Fri, 14 Jan 2022 13:57:11 +0100
Subject: [PATCH] load image in timeline from when it is partially visible

---
 .../session/room/timeline/tiles/BaseMediaTile.js | 16 +++++++++++++---
 .../web/ui/session/room/timeline/ImageView.js    |  1 -
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/domain/session/room/timeline/tiles/BaseMediaTile.js b/src/domain/session/room/timeline/tiles/BaseMediaTile.js
index e5e62107..a927d766 100644
--- a/src/domain/session/room/timeline/tiles/BaseMediaTile.js
+++ b/src/domain/session/room/timeline/tiles/BaseMediaTile.js
@@ -25,10 +25,8 @@ export class BaseMediaTile extends BaseMessageTile {
         super(options);
         this._decryptedThumbnail = null;
         this._decryptedFile = null;
+        this._isVisible = false;
         this._error = null;
-        if (!this.isPending) {
-            this._tryLoadEncryptedThumbnail();
-        }
     }
 
     get isUploading() {
@@ -60,6 +58,9 @@ export class BaseMediaTile extends BaseMessageTile {
     }
 
     get thumbnailUrl() {
+        if (!this._isVisible) {
+            return "";
+        }
         if (this._decryptedThumbnail) {
             return this._decryptedThumbnail.url;
         } else {
@@ -85,6 +86,15 @@ export class BaseMediaTile extends BaseMessageTile {
         return "";
     }
 
+    notifyVisible() {
+        super.notifyVisible();
+        this._isVisible = true;
+        this.emitChange("thumbnailUrl");
+        if (!this.isPending) {
+            this._tryLoadEncryptedThumbnail();
+        }
+    }
+
     get width() {
         const info = this._getContent()?.info;
         return Math.round(info?.w * this._scaleFactor());
diff --git a/src/platform/web/ui/session/room/timeline/ImageView.js b/src/platform/web/ui/session/room/timeline/ImageView.js
index f4c1ecf7..1668b09c 100644
--- a/src/platform/web/ui/session/room/timeline/ImageView.js
+++ b/src/platform/web/ui/session/room/timeline/ImageView.js
@@ -19,7 +19,6 @@ import {BaseMediaView} from "./BaseMediaView.js";
 export class ImageView extends BaseMediaView {
     renderMedia(t, vm) {
         const img = t.img({
-            loading: "lazy",
             src: vm => vm.thumbnailUrl,
             alt: vm => vm.label,
             title: vm => vm.label,