Fix: Images no longer reserve their space in the timeline correctly (#10571)

* test case

* fix + lint

* refix strictNullChecks issue

* add comment about max image size

* tweak

* use safer magic number

test/components/views/messages/MImageBody-test.tsx

@@ -61,6 +61,10 @@ describe("<MImageBody/>", () => {
         sender: userId,
         type: EventType.RoomMessage,
         content: {
+            info: {
+                w: 40,
+                h: 50,
+            },
             file: {
                 url: "mxc://server/encrypted-image",
             },
@@ -72,6 +76,21 @@ describe("<MImageBody/>", () => {
         permalinkCreator: new RoomPermalinkCreator(new Room(encryptedMediaEvent.getRoomId()!, cli, cli.getUserId()!)),
     };
 
+    it("should show a thumbnail while image is being downloaded", async () => {
+        fetchMock.getOnce(url, { status: 200 });
+
+        const { container } = render(
+            <MImageBody
+                {...props}
+                mxEvent={encryptedMediaEvent}
+                mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
+            />,
+        );
+
+        // thumbnail with dimensions present
+        expect(container).toMatchSnapshot();
+    });
+
     it("should show error when encrypted media cannot be downloaded", async () => {
         fetchMock.getOnce(url, { status: 500 });