local echo for image tiles

src/domain/session/room/timeline/tiles/ImageTile.js

@@ -32,6 +32,11 @@ export class ImageTile extends MessageTile {
             this.navigation.segment("room", this._room.id),
             this.navigation.segment("lightbox", this._entry.id)
         ]);
+        if (this._entry.attachments) {
+            this.track(this._entry.attachments.url.status.subscribe(() => {
+                this.emitChange("uploadStatus");
+            }));
+        }
     }
 
     async _loadEncryptedFile(file) {
@@ -64,12 +69,26 @@ export class ImageTile extends MessageTile {
         return this._lightboxUrl;
     }
 
+    get isUploading() {
+        return !!this._entry.attachments;
+    }
+
+    get uploadStatus() {
+        if (this._entry.attachments) {
+            return this._entry.attachments.url.status.get();
+        }
+        return "";
+    }
+
     get thumbnailUrl() {
         if (this._decryptedThumbail) {
             return this._decryptedThumbail.url;
         } else if (this._decryptedImage) {
             return this._decryptedImage.url;
         }
+        if (this._entry.attachments) {
+            return this._entry.attachments.url.localPreview.url;
+        }
         const mxcUrl = this._getContent()?.url;
         if (typeof mxcUrl === "string") {
             return this._mediaRepository.mxcUrlThumbnail(mxcUrl, this.thumbnailWidth, this.thumbnailHeight, "scale");

src/platform/web/ui/session/room/timeline/ImageView.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import {TemplateView} from "../../../general/TemplateView.js";
 import {renderMessage} from "./common.js";
+import {spinner} from "../../../common.js";
 
 export class ImageView extends TemplateView {
     render(t, vm) {
@@ -31,18 +32,26 @@ export class ImageView extends TemplateView {
             // can slow down rendering, and was bleeding through the lightbox.
             spacerStyle = `height: ${vm.thumbnailHeight}px`;
         }
+        const children = [
+            t.div({className: "spacer", style: spacerStyle}),
+            t.img({
+                loading: "lazy",
+                src: vm => vm.thumbnailUrl,
+                alt: vm => vm.label,
+                title: vm => vm.label,
+                style: `max-width: ${vm.thumbnailWidth}px; max-height: ${vm.thumbnailHeight}px;`
+            }),
+            t.time(vm.date + " " + vm.time),
+        ];
+        if (vm.isUploading) {
+            const uploadStatus = t.div({className: "uploadStatus"}, [
+                spinner(t),
+                vm => vm.uploadStatus
+            ]);
+            children.push(uploadStatus);
+        }
         return renderMessage(t, vm, [
-            t.a({href: vm.lightboxUrl, className: "picture", style: `max-width: ${vm.thumbnailWidth}px`}, [
+            t.a({href: vm.lightboxUrl, className: "picture", style: `max-width: ${vm.thumbnailWidth}px`}, children),
-                t.div({className: "spacer", style: spacerStyle}),
-                t.img({
-                    loading: "lazy",
-                    src: vm => vm.thumbnailUrl,
-                    alt: vm => vm.label,
-                    title: vm => vm.label,
-                    style: `max-width: ${vm.thumbnailWidth}px; max-height: ${vm.thumbnailHeight}px;`
-                }),
-                t.time(vm.date + " " + vm.time),
-            ]),
             t.if(vm => vm.error, t.createTemplate((t, vm) => t.p({className: "error"}, vm.error)))
         ]);
     }